-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
332 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import Ember from 'ember'; | ||
|
||
const { | ||
Component, | ||
computed, | ||
get, | ||
isPresent | ||
} = Ember; | ||
|
||
/** | ||
The `volunteer-headshot` component presents a thumbnail of a volunteer, their | ||
name and randomly selects one of their roles. | ||
## Default Usage | ||
```handlebars | ||
{{volunteer-headshot volunteer=user}} | ||
``` | ||
@class volunteer-headshot | ||
@module Component | ||
@extends Ember.Component | ||
*/ | ||
export default Component.extend({ | ||
attributeBindings: ['data-test-selector'], | ||
classNames: ['volunteer-headshot'], | ||
|
||
/** | ||
A computed alias of the volunteer's user roles. | ||
@property userRoles | ||
@type Ember.Array | ||
*/ | ||
userRoles: computed.alias('volunteer.userRoles'), | ||
|
||
/** | ||
A randomly selected role from the `userRoles` property. | ||
@property userRole | ||
@type Ember.Model | ||
*/ | ||
userRole: computed('userRoles', function() { | ||
let userRoles = get(this, 'userRoles'); | ||
|
||
if (isPresent(userRoles)) { | ||
let randomIndex = Math.floor(Math.random() * get(userRoles, 'length')); | ||
|
||
return userRoles.objectAt(randomIndex); | ||
} | ||
}), | ||
|
||
/** | ||
Returns the volunteer's name. If the `name` property is not defined, it | ||
computes a name from the volunteer's `firstName` & `lastName`. If neither | ||
are defined it returns the volunteer's username. | ||
@property volunteerName | ||
@type String | ||
*/ | ||
volunteerName: computed('volunteer.{name,firstName,lastName}', function() { | ||
let name = get(this, 'volunteer.name'); | ||
let firstName = get(this, 'volunteer.firstName'); | ||
let lastName = get(this, 'volunteer.lastName'); | ||
let userName = get(this, 'volunteer.userName'); | ||
|
||
if (isPresent(name)) { | ||
return name; | ||
} else if (isPresent(firstName) && isPresent(lastName)) { | ||
return `${firstName} ${lastName}`; | ||
} else { | ||
return userName; | ||
} | ||
}) | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import Model from 'ember-data/model'; | ||
import attr from 'ember-data/attr'; | ||
import { belongsTo } from 'ember-data/relationships'; | ||
import Ember from 'ember'; | ||
|
||
const { computed } = Ember; | ||
|
||
export default Model.extend({ | ||
role: attr(), | ||
|
||
member: belongsTo('user', { async: true }), | ||
organization: belongsTo('organization', { async: true }), | ||
|
||
isAdmin: computed.equal('role', 'admin'), | ||
isContributor: computed.equal('role', 'contributor'), | ||
isNotPending: computed.not('isPending'), | ||
isOwner: computed.equal('role', 'owner'), | ||
isPending: computed.equal('role', 'pending') | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
.volunteer-headshot { | ||
@include omega(6n); | ||
@include span-columns(2); | ||
|
||
display: inline-block; | ||
margin-bottom: 1em; | ||
|
||
&__name { | ||
font-weight: 600; | ||
margin: 0; | ||
} | ||
|
||
&__role { | ||
font-size: $body-font-size-small; | ||
color: $text--light; | ||
margin-top: 0; | ||
} | ||
|
||
img { | ||
border-radius: 4px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<img class="volunteer-headshot__image icon large" src={{volunteer.photoThumbUrl}} alt={{volunteerName}} /> | ||
<p class="volunteer-headshot__name" data-test-selector="volunteer name">{{volunteerName}}</p> | ||
<p class="volunteer-headshot__role" data-test-selector="volunteer role">{{userRole.role.name}}</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { moduleForComponent, test } from 'ember-qunit'; | ||
import hbs from 'htmlbars-inline-precompile'; | ||
import PageObject from 'ember-cli-page-object'; | ||
import volunteerHeadshot from '../../pages/components/volunteer-headshot'; | ||
|
||
let page = PageObject.create(volunteerHeadshot); | ||
|
||
const userRoles = [ | ||
{ role: { name: 'Developer' } }, | ||
{ role: { name: 'Ember Developer' } }, | ||
{ role: { name: 'UX Designer' } }, | ||
{ role: { name: 'Software Engineer' } }, | ||
{ role: { name: 'Project Coordinator' } }, | ||
{ role: { name: 'Designer & Developer' } } | ||
]; | ||
|
||
moduleForComponent('volunteer-headshot', 'Integration | Component | volunteer headshot', { | ||
integration: true, | ||
beforeEach() { | ||
this.set('user', { | ||
name: 'Test User', | ||
photoThumbUrl: '/assets/images/icons/test.png', | ||
userRoles | ||
}); | ||
page.setContext(this); | ||
page.render(hbs`{{volunteer-headshot volunteer=user}}`); | ||
} | ||
}); | ||
|
||
test('it renders the volunteer\'s name', function(assert) { | ||
assert.expect(1); | ||
assert.equal(page.name, this.get('user.name')); | ||
}); | ||
|
||
test('it computes the name if it is not present', function(assert) { | ||
let firstName = 'Split'; | ||
let lastName = 'Name'; | ||
|
||
this.set('user.name', null); | ||
this.set('user.firstName', firstName); | ||
this.set('user.lastName', lastName); | ||
|
||
assert.equal(page.name, `${firstName} ${lastName}`); | ||
}); | ||
|
||
test('it randomly selects one of the available roles', function(assert) { | ||
assert.expect(1); | ||
|
||
let roles = userRoles.map((userRole) => { | ||
return userRole.role.name; | ||
}); | ||
assert.ok(roles.includes(page.role)); | ||
}); | ||
|
||
test('it sets the image alt text', function(assert) { | ||
assert.expect(1); | ||
assert.equal(page.image.alt, `${this.get('user.name')}`); | ||
}); | ||
|
||
test('it sets the image src', function(assert) { | ||
assert.expect(1); | ||
assert.equal(page.image.src, this.get('user.photoThumbUrl')); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.