-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
alert-banner.js
47 lines (42 loc) · 1.74 KB
/
alert-banner.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import Component from '@ember/component';
import { computed } from '@ember/object';
import { messageTypes } from 'core/helpers/message-types';
import layout from '../templates/components/alert-banner';
/**
* @module AlertBanner
* `AlertBanner` components are used to inform users of important messages.
*
* @example
* ```js
* <AlertBanner @type="danger" @message="{{model.keyId}} is not a valid lease ID"/>
* ```
*
* @param {String} type=null - The banner type. This comes from the message-types helper.
* @param {String} [secondIconType=null] - If you want a second icon to appear to the right of the title. This comes from the message-types helper.
* @param {Object} [progressBar=null] - An object containing a value and maximum for a progress bar. Will be displayed next to the message title.
* @param {String} [message=null] - The message to display within the banner.
* @param {String} [title=null] - A title to show above the message. If this is not provided, there are default values for each type of alert.
* @param [marginTop=false]{Boolean} - Whether or not to add margin above component.
*
*/
export default Component.extend({
layout,
type: null,
message: null,
title: null,
secondIconType: null,
progressBar: null,
yieldWithoutColumn: false,
marginless: false,
classNameBindings: ['containerClass', 'marginTop:margin-top'],
containerClass: computed('type', 'marginless', function() {
const base = this.marginless ? 'message message-marginless ' : 'message ';
return base + messageTypes([this.type]).class;
}),
alertType: computed('type', function() {
return messageTypes([this.type]);
}),
secondAlertType: computed('secondIconType', function() {
return messageTypes([this.secondIconType]);
}),
});