Skip to content

Commit ff1db39

Browse files
MelSumnerMelSumner
authored
Merge pull request #197 from ember-learn/new-footer
implementing new footer
2 parents 1ae4e70 + b3dd4d7 commit ff1db39

File tree

19 files changed

+208
-133
lines changed

19 files changed

+208
-133
lines changed

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import Component from '@ember/component';
2-
import layout from '../../templates/components/es-footer/es-contributions';
3-
import { contributorLinks } from '../../constants/es-footer';
1+
import Component from 'sparkles-component';
42

5-
export default Component.extend({
6-
classNames: ['footer-contributions'],
7-
layout,
8-
contributorLinks
9-
});
3+
export default class EsContributions extends Component {
4+
5+
}

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

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
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';
1+
import Component from 'sparkles-component';
52

3+
export default class EsContributions extends Component {
64

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-
});
5+
}

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import Component from '@ember/component';
2-
import layout from '../../templates/components/es-footer/es-statement';
3-
import { tagline, socialLinks } from '../../constants/es-footer';
1+
import Component from 'sparkles-component';
42

5-
export default Component.extend({
6-
classNames: ['footer-statement'],
7-
layout,
8-
tagline,
9-
socialLinks
10-
});
3+
export default class EsStatement extends Component {
4+
constructor() {
5+
super(...arguments)
6+
7+
this.currentYear = new Date().getUTCFullYear();
8+
}
9+
}

‎addon/constants/es-footer.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,6 @@ const contributorLinks = [{
4040
}];
4141

4242
const infoLinks = [{
43-
name: 'Tilde Inc.',
44-
href: 'http://tilde.io',
45-
lineBreak: true
46-
}, {
4743
name: 'Team',
4844
href: 'https://emberjs.com/team'
4945
}, {
@@ -57,7 +53,7 @@ const infoLinks = [{
5753
name: 'Legal',
5854
href: 'https://emberjs.com/legal'
5955
}, {
60-
name: 'Brand',
56+
name: 'Branding',
6157
href: 'https://emberjs.com/brand',
6258
lineBreak: true
6359
}, {

‎addon/styles/addon.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@
1313
@import "components/es-button.css";
1414
@import "components/es-tabs.css";
1515
@import "components/es-card.css";
16+
@import "components/es-footer.css";

‎addon/styles/components/es-footer.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* .es-footer.container {
2+
padding: 0;
3+
} */
4+
5+
.es-footer {
6+
& a {
7+
text-decoration: none;
8+
color: var(--color-dark);
9+
}
10+
11+
& .footer-info {
12+
display: flex;
13+
padding: var(--spacing-2) 0;
14+
15+
& .footer-logo {
16+
height: 5rem;
17+
}
18+
}
19+
20+
& .footer-info-links {
21+
display: grid;
22+
grid-template-columns: repeat(2, 1fr);
23+
grid-gap: 0.5rem;
24+
}
25+
26+
& .footer-hr {
27+
border: 0;
28+
border-bottom: 2px solid var(--color-muted);
29+
margin: 0;
30+
}
31+
32+
& .footer-statement {
33+
padding: var(--spacing-2) 0;
34+
display: flex;
35+
justify-content: space-between;
36+
}
37+
38+
& .footer-copyright {
39+
color: var(--color-gray);
40+
}
41+
42+
& .footer-social {
43+
display: flex;
44+
align-items: center;
45+
46+
& svg {
47+
fill: var(--color-gray);
48+
}
49+
}
50+
51+
& .footer-contributions-wrapper {
52+
background-color: var(--color-muted);
53+
}
54+
55+
& .footer-contributions {
56+
color: var(--color-gray);
57+
padding: 0;
58+
display: flex;
59+
justify-content: space-between;
60+
align-items: center;
61+
}
62+
}

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

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
11
<footer class="es-footer" ...attributes>
2-
<div class="container">
2+
{{!--
3+
Pass footer properties to support
4+
{{es-footer tagline="My custom tagline" contributorLinks=myLinks}}
5+
--}}
6+
{{es-footer/es-info infoLinks=infoLinks}}
37

4-
{{yield
5-
(hash
6-
info = (component "es-footer/es-info")
7-
statement = (component "es-footer/es-statement")
8-
contributions = (component "es-footer/es-contributions")
9-
)
10-
}}
8+
<hr class="footer-hr">
119

12-
{{#unless hasBlock}}
10+
{{es-footer/es-statement tagline=tagline socialLinks=socialLinks}}
1311

14-
{{!--
15-
Pass footer properties to support
16-
{{es-footer tagline="My custom tagline" contributorLinks=myLinks}}
17-
--}}
18-
{{es-footer/es-info infoLinks=infoLinks}}
19-
{{es-footer/es-statement tagline=tagline socialLinks=socialLinks}}
20-
{{es-footer/es-contributions contributorLinks=contributorLinks}}
12+
<hr class="footer-hr">
2113

22-
{{/unless}}
23-
24-
</div>
14+
{{es-footer/es-contributions contributorLinks=contributorLinks}}
2515
</footer>

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

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
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}} title={{link.title}} aria-label={{link.title}}>
9-
{{svg-jar link.class class="contributor-logo"}}
10-
</a>
1+
<div class="footer-contributions-wrapper">
2+
<div class="footer-contributions container">
3+
<span>Ember is generously supported by</span>
4+
<div>
5+
{{#each args.contributorLinks as |link|}}
6+
<a href={{link.href}} title={{link.title}} aria-label={{link.title}} class="icon-wrapper large margin-left-xsmall">
7+
{{svg-jar link.class class="icon" }}
8+
</a>
9+
{{/each}}
1110
</div>
12-
{{/each}}
13-
{{/if}}
11+
</div>
12+
</div>

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1+
<div class="footer-info container">
2+
<img src="/images/ember-logo.svg" alt="Ember Logo" class="footer-logo margin-right-medium">
13

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}}
4+
<div class="footer-info-links">
5+
{{#each args.infoLinks as |link|}}
6+
<a href={{link.href}} class="small margin-bottom-xsmall margin-left-xsmall">{{link.name}}</a>
7+
{{/each}}
8+
</div>
9+
</div>

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
2-
{{#if hasBlock}}
3-
{{yield}}
4-
{{else}}
5-
<p class="footer-tagline">{{tagline}}</p>
1+
<div class="footer-statement container">
2+
<div>
3+
<p class="footer-copyright">
4+
&copy; Copyright {{currentYear}} - <a href="https://www.tilde.io/" class="footer-copyright">Tilde Inc.</a>
5+
</p>
6+
<p class="footer-tagline">{{args.tagline}}</p>
7+
</div>
68
<div class="footer-social">
7-
{{#each socialLinks as |link|}}
8-
<a href={{link.href}} title={{link.title}} aria-label={{link.label}}>
9-
{{svg-jar link.class}}
9+
{{#each args.socialLinks as |link|}}
10+
<a href={{link.href}} title={{link.title}} aria-label={{link.label}} class="icon-wrapper margin-xsmall small">
11+
{{svg-jar link.class class="icon" }}
1012
</a>
1113
{{/each}}
1214
</div>
13-
{{/if}}
15+
</div>

‎app/templates/components/es-footer/es-contributions.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-styleguide/templates/components/es-footer/es-contributions';

‎app/templates/components/es-footer/es-info.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-styleguide/templates/components/es-footer/es-info';

‎app/templates/components/es-footer/es-statement.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-styleguide/templates/components/es-footer/es-statement';

‎docs/components/footer.md

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,3 @@
33
```handlebars
44
{{es-footer}}
55
```
6-
7-
```handlebars
8-
{{es-footer tagline="A framework for ambitious web developers"}}
9-
```
10-
11-
```handlebars
12-
{{!-- Check out the component blocks and their respective
13-
configuration --}}
14-
{{#es-footer as |f|}}
15-
{{f.info infoLinks=infoLinks}}
16-
{{f.statement socialLinks=socialLinks}}
17-
{{f.contributions contributorLinks=contributorLinks}}
18-
{{/es-footer}}
19-
```
20-
21-
```handlebars
22-
{{!-- You can also add your own content on each component block --}}
23-
{{#es-footer as |f|}}
24-
{{#f.info}}
25-
<br/>
26-
<a>Team</a>
27-
<br/>
28-
<a>Contact</a>
29-
{{/f.info}}
30-
{{#f.statement}}
31-
Highly Productive Out of the Box
32-
{{/f.statement}}
33-
{{#f.contributions}}
34-
<div class="contributor">
35-
<p>Hosted by:</p>
36-
<a href="https://www.heroku.com/emberjs">
37-
{{svg-jar "heroku-logo" class="contributor-logo"}}
38-
</a>
39-
</div>
40-
{{/f.contributions}}
41-
{{/es-footer}}
42-
```

‎public/images/ember-logo.svg

Lines changed: 15 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)