Skip to content

Commit f160cb9

Browse files
ppcanoppcano
committed
Footer: separate data from the component
1 parent b4f055d commit f160cb9

File tree

17 files changed

+1620
-532
lines changed

17 files changed

+1620
-532
lines changed

‎addon/components/es-footer.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import Component from '@ember/component';
22
import layout from '../templates/components/es-footer';
3+
import { socialLinks, infoLinks, contributorLinks, tagline } from '../constants/es-footer';
4+
35

46
export default Component.extend({
57
layout,
@@ -8,9 +10,15 @@ export default Component.extend({
810
tagName: 'footer',
911
currentYear: null,
1012
init() {
11-
this._super(...arguments);
13+
this._super(...arguments);
1214
this.currentYear = new Date().getUTCFullYear();
1315
},
16+
17+
socialLinks,
18+
tagline,
19+
contributorLinks,
20+
infoLinks,
21+
1422
//accessibility support
1523
ariaDescribedby: null,
1624
ariaLabel: null,

‎addon/components/es-footer/es-contributions.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Component from '@ember/component';
2+
import layout from '../../templates/components/es-footer/es-contributions';
3+
import { contributorLinks } from '../../constants/es-footer';
4+
5+
export default Component.extend({
6+
classNames: ['footer-contributions'],
7+
layout,
8+
contributorLinks
9+
});

‎addon/components/es-footer/es-info.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Component from '@ember/component';
2+
import layout from '../../templates/components/es-footer/es-info';
3+
import { computed } from '@ember/object';
4+
import { infoLinks } from '../../constants/es-footer';
5+
6+
7+
export default Component.extend({
8+
classNames: ['footer-info'],
9+
layout,
10+
infoLinks,
11+
infoLinksLastIndex: computed('infoLinks.length', function() {
12+
return this.infoLinks.length - 1;
13+
}),
14+
15+
init() {
16+
this._super(...arguments);
17+
this.currentYear = new Date().getUTCFullYear();
18+
},
19+
});

‎addon/components/es-footer/es-statement.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Component from '@ember/component';
2+
import layout from '../../templates/components/es-footer/es-statement';
3+
import { tagline, socialLinks } from '../../constants/es-footer';
4+
5+
export default Component.extend({
6+
classNames: ['footer-statement'],
7+
layout,
8+
tagline,
9+
socialLinks
10+
});

‎addon/constants/es-footer.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
const socialLinks = [{
3+
title: 'Twitter',
4+
href: 'http://twitter.com/emberjs',
5+
class: 'twitter-logo'
6+
}, {
7+
title: 'GitHub',
8+
href: 'https://github.com/emberjs/ember.js',
9+
class: 'github-logo'
10+
}, {
11+
title: 'Discord',
12+
href: 'https://discordapp.com/invite/zT3asNS',
13+
class: 'discord-logo'
14+
}];
15+
16+
17+
const contributorLinks = [{
18+
name: 'Hosted by:',
19+
href: 'https://www.heroku.com/emberjs',
20+
class: 'heroku-logo'
21+
}, {
22+
name: 'CDN provided by:',
23+
href: 'https://www.fastly.com',
24+
class: 'fastly-logo'
25+
}, {
26+
name: 'Tested with:',
27+
href: 'https://percy.io',
28+
class: 'percy-logo'
29+
}, {
30+
name: 'Resolved with:',
31+
href: 'https://dnsimple.com/resolving/emberjs',
32+
class: 'dnsimple-logo-dark'
33+
}];
34+
35+
const infoLinks = [{
36+
name: 'Tilde Inc.',
37+
href: 'http://tilde.io',
38+
lineBreak: true
39+
}, {
40+
name: 'Team',
41+
href: 'https://emberjs.com/team'
42+
}, {
43+
name: 'Sponsors',
44+
href: 'https://emberjs.com/sponsors',
45+
lineBreak: true
46+
}, {
47+
name: 'Security',
48+
href: 'https://emberjs.com/security'
49+
}, {
50+
name: 'Legal',
51+
href: 'https://emberjs.com/legal'
52+
}, {
53+
name: 'Brand',
54+
href: 'https://emberjs.com/brand',
55+
lineBreak: true
56+
}, {
57+
name: 'Community Guidelines',
58+
href: 'https://emberjs.com/guidelines'
59+
}];
60+
61+
62+
const tagline = 'Ember.js is free, open source and always will be.';
63+
64+
export { socialLinks, infoLinks, contributorLinks, tagline };

‎addon/styles/_es-footer.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@
126126
color: #444444;
127127
}
128128

129+
.footer .footer-contributions .contributor-logo,
129130
.footer .footer-contributions .heroku-logo,
130131
.footer .footer-contributions .percy-logo,
131132
.footer .footer-contributions .dnsimple-logo,

‎addon/templates/components/es-footer.hbs

Lines changed: 15 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,23 @@
11
<div class="footer responsive">
22
<div class="container">
33

4-
<div class="footer-info">
5-
Copyright {{currentYear}}
6-
<a href="http://tilde.io">Tilde Inc.</a>
7-
<br>
8-
<a href="https://emberjs.com/team">Team</a> |
9-
<a href="https://emberjs.com/sponsors">Sponsors</a>
10-
<br>
11-
<a href="https://emberjs.com/security">Security</a> |
12-
<a href="https://emberjs.com/legal">Legal</a> |
13-
<a href="https://emberjs.com/logos">Brand</a>
14-
<br>
15-
<a href="https://emberjs.com/guidelines">Community Guidelines</a>
16-
</div>
4+
{{yield (hash
5+
info = (component 'es-footer/es-info')
6+
statement = (component 'es-footer/es-statement')
7+
contributions = (component 'es-footer/es-contributions')
8+
)}}
179

18-
<div class="footer-statement">
19-
{{yield}}
20-
<p class="footer-tagline">Ember.js is free, open source and always will be.</p>
21-
<div class="footer-social">
22-
<a href="http://twitter.com/emberjs" title="Twitter">
23-
{{svg-jar "twitter-logo"}}
24-
</a>
25-
<a href="https://github.com/emberjs/ember.js" title="GitHub">
26-
{{svg-jar "github-logo"}}
27-
</a>
28-
<a href="https://discordapp.com/invite/zT3asNS" title="Discord">
29-
{{svg-jar "discord-logo"}}
30-
</a>
31-
</div>
32-
</div>
10+
{{#unless hasBlock}}
3311

34-
<div class="footer-contributions">
35-
<div class="contributor">
36-
<p>Hosted by:</p>
37-
<a href="https://www.heroku.com/emberjs">
38-
{{svg-jar "heroku-logo" class="heroku-logo"}}
39-
</a>
40-
</div>
41-
<div class="contributor">
42-
<p>CDN provided by:</p>
43-
<a href="https://www.fastly.com">
44-
{{svg-jar "fastly-logo" class="fastly-logo"}}
45-
</a>
46-
</div>
47-
<div class="contributor">
48-
<p>Tested with:</p>
49-
<a href="https://percy.io">
50-
{{svg-jar "percy-logo" class="percy-logo"}}
51-
</a>
52-
</div>
53-
<div class="contributor">
54-
<p>Resolved with:</p>
55-
<a href="https://dnsimple.com/resolving/emberjs">
56-
{{svg-jar "dnsimple-logo-dark" class="dnsimple-logo"}}
57-
</a>
58-
</div>
59-
</div>
12+
{{!--
13+
Pass footer properties to support
14+
{{es-footer tagline="My custom tagline" contributorLinks=myLinks}}
15+
--}}
16+
{{es-footer/es-info infoLinks=infoLinks}}
17+
{{es-footer/es-statement tagline=tagline socialLinks=socialLinks}}
18+
{{es-footer/es-contributions contributorLinks=contributorLinks}}
19+
20+
{{/unless}}
6021

6122
</div>
6223
</div>

‎addon/templates/components/es-footer/es-contributions.hbs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
{{#if hasBlock}}
3+
{{yield}}
4+
{{else}}
5+
{{#each contributorLinks as |link|}}
6+
<div class="contributor">
7+
<p>{{link.name}}</p>
8+
<a href={{link.href}}>
9+
{{svg-jar link.class class="contributor-logo"}}
10+
</a>
11+
</div>
12+
{{/each}}
13+
{{/if}}

‎addon/templates/components/es-footer/es-info.hbs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
Copyright {{currentYear}}
3+
{{#if hasBlock}}
4+
{{yield}}
5+
{{else}}
6+
{{#each infoLinks as |link index|}}
7+
<a href={{link.href}}>{{link.name}}</a>
8+
{{#if link.lineBreak}}
9+
<br/>
10+
{{else if (not-eq index infoLinksLastIndex)}}
11+
|
12+
{{/if}}
13+
{{/each}}
14+
{{/if}}

‎addon/templates/components/es-footer/es-statement.hbs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
{{#if hasBlock}}
3+
{{yield}}
4+
{{else}}
5+
<p class="footer-tagline">{{tagline}}</p>
6+
<div class="footer-social">
7+
{{#each socialLinks as |link|}}
8+
<a href={{link.href}} title={{link.title}}>
9+
{{svg-jar link.class}}
10+
</a>
11+
{{/each}}
12+
</div>
13+
{{/if}}

0 commit comments

Comments
 (0)