Permalink
Browse files

Alerts can be closed with a close button

  • Loading branch information...
alisdair committed Jun 20, 2015
1 parent ecada73 commit 4fc33bac033eb21180f6800790c7b651bd80a48c
@@ -5,4 +5,11 @@ export default Ember.Component.extend({
alert: null,
text: Ember.computed.alias('alert.text'),
closeAction: null,
actions: {
closeAction() {
this.sendAction('closeAction', this.get('alert'));
}
}
});
@@ -6,10 +6,24 @@ export default Ember.Controller.extend({
alertText: 'Alert banner text',
createDisabled: Ember.computed.empty('alertText'),
dismissible: true,
closeAction: Ember.computed('dismissible', function() {
if (this.get('dismissible')) {
return 'removeAlert';
}
}),
actions: {
createAlert() {
let alert = Alert.create({ text: this.get('alertText') });
let alert = Alert.create({
text: this.get('alertText'),
closeAction: this.get('closeAction')
});
this.get('alerts').pushObject(alert);
},
removeAlert(alert) {
this.get('alerts').removeObject(alert);
}
}
});
@@ -26,6 +26,15 @@ h1
padding: $spacing / 2
margin: $spacing / 2 auto
text-align: center
.close
float: right
button.close
padding: 0
background: 0 0
border: 0
&:focus
opacity: 0.5
.form-group
margin: $spacing / 2 0
@@ -1 +1,6 @@
{{#if closeAction}}
<button {{action 'closeAction'}} aria-label="Close" class="close">
<span aria-hidden="true">×</span>
</button>
{{/if}}
{{text}}
@@ -1,6 +1,6 @@
<div class="alert-banner-container">
{{#each alerts as |alert|}}
{{alert-banner alert=alert}}
{{alert-banner alert=alert closeAction=alert.closeAction}}
{{/each}}
</div>
@@ -11,6 +11,10 @@
{{input placeholder="Alert text" value=alertText}}
</div>
<div class="form-group">
<label>{{input type='checkbox' checked=dismissible}} Dismissible</label>
</div>
<div class="form-group">
<button {{action 'createAlert'}} disabled={{createDisabled}}>
Create alert
@@ -21,3 +21,29 @@ test('renders text in element with class alert-banner', function(assert) {
assert.equal($alert.text().trim(), 'Hello, world!', 'alert includes text');
});
test('close button and closeAction', function(assert) {
assert.expect(3);
var alert = Alert.create({ text: 'Hello, world!' });
this.set('alert', alert);
this.set('closeAction', null);
this.render(hbs`
{{alert-banner alert=alert closeAction=closeAction}}
`);
var $button = this.$('.alert-banner button');
assert.equal($button.length, 0, 'no close button if no closeAction');
this.set('closeAction', 'removeAlert');
$button = this.$('.alert-banner button');
assert.equal($button.length, 1, 'has close button if closeAction is set');
this.on('removeAlert', a => {
assert.deepEqual(a, alert, 'clicking close fires action passing alert');
});
$button.click();
});

0 comments on commit 4fc33ba

Please sign in to comment.