Components

Dialog

Dialog component act as a "3 in 1".

You can open a dialog with either a confirm message or an alert message. You also have the possibility to open a confirm as a toaster, meaning that the alert / confirm opens in the bottom of the screen. Consult your designer with documentation if you are uncertain of how to use this.

Dialog component also handles queuing. If you try to open a dialog where a toaster is visible, the toaster will convert to a popup and open first in queue.

Code

import { Dialog, DialogConfirm, DialogConstants } from 'trinidad-ui';

const _dialog = new DialogConfirm({
  icon: 'time-limit',
  branding: DialogConstants.branding.NEUTRAL,
  title: 'Du har varit inloggad i 60 minuter.',
  actions: [
    {
      title: 'OK',
      callback: function() {
        _dialog.close(function() {
        });
      }
    }
  ]
});

const dialog = new Dialog();
dialog.add(_dialog);

//-----------------------------
// For Trinidad users
//-----------------------------
// In the world of Trinidad you can't use import, so you need to add
// a dependency to 'dialog' in your controller.
// Replace all 'DialogConstants' with svs.ui.dialog.
// Replace new DialogConfirm with new svs.ui.dialog.Confirm({...
// Replace dialog.add(_dialog) with svs.ui.dialog.api.add(dialog);

Toaster

import { Dialog, DialogConfirm, DialogConstants } from 'trinidad-ui';

const _dialog = new DialogConfirm({
  icon: 'tips',
  branding: DialogConstants.branding.NEUTRAL,
  area: DialogConstants.area.TOASTER,
  title: 'Hi, nice to see you.',
  message: [
    {
      type: DialogConstants.message.TEXT,
      text:
        'Checkout different variants of dialogs and toasters here.'
    }
  ],
  actions: [
    {
      title: 'Roger that',
      callback: function() {
        _dialog.close();
      }
    }
  ]
});

const dialog = new Dialog();
dialog.add(_dialog);

//-----------------------------
// For Trinidad users
//-----------------------------
// In the world of Trinidad you can't use import, so you need to add
// a dependency to 'dialog' in your controller.
// Replace all 'DialogConstants' with svs.ui.dialog.
// Replace new DialogConfirm with new svs.ui.dialog.Confirm({...
// Replace dialog.add(_dialog) with svs.ui.dialog.api.add(dialog);

Contextual

import { Dialog, DialogContextual, DialogConstants } from 'trinidad-ui'; import {
  AnimateInView
} from '@components/animate-in-view';

const _contextual = new DialogContextual({
  area: DialogConstants.area.CONTEXTUAL,
  branding: DialogConstants.branding.SPORT,
  attachTo: document.querySelector('.js-contextual-example-1'),
  title: '',
  message: [
    {
      type: DialogConstants.message.TEXT,
      text:
        'Simple contextual has no buttons and closes on click.'
    }
  ]
  })

const dialog = new Dialog();
dialog.add(_contextual);

//-----------------------------
// For Trinidad users
//-----------------------------
// In the world of Trinidad you can't use import, so you need to add
// a dependency to 'dialog' in your controller.
// Replace all 'DialogConstants' with svs.ui.dialog.
// Replace new DialogContextual with new svs.ui.dialog.Contextual({...
// Replace dialog.add(_contextual) with svs.ui.dialog.api.add(_contextual);

Properties

Property	Default value	Available values	Description
branding		tur / sport / neutral	(required) Branding must be defined.
title			Title to be displayed.
price			Used for payment dialog NOTE it can only be used combined with the product option
product			Used for payment dialog NOTE it can only be used combined with the price option
isTicket			Used in payment dialog for Skrapspel
isVoucher			Used in payment dialog for voucher
isGamingResponsibility	false		Used for gamingresponsibility messages
isBag			Used in payment dialog for Rubbet/Lördagsgodis
icon	checkmark		Icon to be displayed. If dialog type is error, the icon is predefined. You may pass in another component's HTML here, such as ui/bank, as rendered HTML.
area	popup	popup / toaster	Which area it will display in.
type	default	default / error	Specify which dialog type it is.
convertToPopup	true		If a toaster cannot become a confirm, set this to false.
allowDimmerClick	true	boolean	Defaults to: 1 button = allow dimmer click, unless it's an error message. 2 buttons = do not allow
autoClose	0	2000	Set the dialog to autoclose.
requireHandshake	false		A handshake prevents the dialog queue from continuing until resolveHandshake has been called.
handshakeTimeout	10000		A handshake will be cancelled after this time
message			Message array to be displayed
- type		text, checkbox	Select what message type to use.
- (value)			If it is a checkbox, specify value.
- (block)	false		If it is a checkbox, set to true to use block instead of inline-block for checkbox message row.
- (align)		left / center / right	Force text row alignment
actions			Array of buttons. Supports one or two.
- title			Title of button
- showLoader			Display a loader on click.
- callback			Callback that triggers when button is clicked.

Methods

Method	Parameters		Description
add	options		Shows the dialog with options described above.
close			Closes and opens next dialog in queue, or hides the dialog if it's the last. You may pass a callback, when you want to route for example, to make sure the animation has ended before executing.

Events

Method	Parameters		Description
blocking	isBlocking: true/false		True if dialog is open and blocking page with the dimmer. False if no dialog or toaster is open.

Callbacks

If you have checkboxes in your dialog, these values will be included in the callback on button click alongside the event: function(e, forms) If your dialog has requireHandshake: true you must run dialog.resolveHandshake(); to re-enable the dialog-queue.

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.