implementing new footer

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

@@ -1,9 +1,5 @@
-import Component from '@ember/component';
-import layout from '../../templates/components/es-footer/es-contributions';
-import { contributorLinks } from '../../constants/es-footer';
+import Component from 'sparkles-component';
 
-export default Component.extend({
-  classNames: ['footer-contributions'],
-  layout,
-  contributorLinks
-});
+export default class EsContributions extends Component {
+
+}

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

@@ -1,19 +1,5 @@
-import Component from '@ember/component';
-import layout from '../../templates/components/es-footer/es-info';
-import { computed } from '@ember/object';
-import { infoLinks } from '../../constants/es-footer';
+import Component from 'sparkles-component';
 
+export default class EsContributions extends Component {
 
-export default Component.extend({
-  classNames: ['footer-info'],
-  layout,
-  infoLinks,
-  infoLinksLastIndex: computed('infoLinks.length', function() {
-    return this.infoLinks.length - 1;
-  }),
-
-  init() {
-    this._super(...arguments);
-    this.currentYear = new Date().getUTCFullYear();
-  },
-});
+}

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

@@ -1,10 +1,9 @@
-import Component from '@ember/component';
-import layout from '../../templates/components/es-footer/es-statement';
-import { tagline, socialLinks } from '../../constants/es-footer';
+import Component from 'sparkles-component';
 
-export default Component.extend({
-  classNames: ['footer-statement'],
-  layout,
-  tagline,
-  socialLinks
-});
+export default class EsStatement extends Component {
+  constructor() {
+    super(...arguments)
+
+    this.currentYear = new Date().getUTCFullYear();
+  }
+}

addon/constants/es-footer.js

@@ -40,10 +40,6 @@ const contributorLinks = [{
 }];
 
 const infoLinks = [{
-  name: 'Tilde Inc.',
-  href: 'http://tilde.io',
-  lineBreak: true
-}, {
   name: 'Team',
   href: 'https://emberjs.com/team'
 }, {
@@ -57,7 +53,7 @@ const infoLinks = [{
   name: 'Legal',
   href: 'https://emberjs.com/legal'
 }, {
-  name: 'Brand',
+  name: 'Branding',
   href: 'https://emberjs.com/brand',
   lineBreak: true
 }, {

addon/styles/addon.css

@@ -13,3 +13,4 @@
 @import "components/es-button.css";
 @import "components/es-tabs.css";
 @import "components/es-card.css";
+@import "components/es-footer.css";

addon/styles/components/es-footer.css

@@ -0,0 +1,62 @@
+/* .es-footer.container {
+  padding: 0;
+} */
+
+.es-footer {
+  & a {
+    text-decoration: none;
+    color: var(--color-dark);
+  }
+
+  & .footer-info {
+    display: flex;
+    padding: var(--spacing-2) 0;
+
+    & .footer-logo {
+      height: 5rem;
+    }
+  }
+
+  & .footer-info-links {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 0.5rem;
+  }
+
+  & .footer-hr {
+    border: 0;
+    border-bottom: 2px solid var(--color-muted);
+    margin: 0;
+  }
+
+  & .footer-statement {
+    padding: var(--spacing-2) 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & .footer-copyright {
+    color: var(--color-gray);
+  }
+
+  & .footer-social {
+    display: flex;
+    align-items: center;
+
+    & svg {
+      fill: var(--color-gray);
+    }
+  }
+
+  & .footer-contributions-wrapper {
+    background-color: var(--color-muted);
+  }
+
+  & .footer-contributions {
+    color: var(--color-gray);
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

addon/templates/components/es-footer.hbs

@@ -1,25 +1,15 @@
 <footer class="es-footer" ...attributes>
-  <div class="container">
+  {{!--
+    Pass footer properties to support
+    {{es-footer tagline="My custom tagline" contributorLinks=myLinks}}
+  --}}
+  {{es-footer/es-info infoLinks=infoLinks}}
 
-    {{yield
-      (hash
-      info = (component "es-footer/es-info")
-      statement = (component "es-footer/es-statement")
-      contributions = (component "es-footer/es-contributions")
-      )
-    }}
+  <hr class="footer-hr">
 
-    {{#unless hasBlock}}
+  {{es-footer/es-statement tagline=tagline socialLinks=socialLinks}}
 
-      {{!--
-        Pass footer properties to support
-        {{es-footer tagline="My custom tagline" contributorLinks=myLinks}}
-      --}}
-      {{es-footer/es-info infoLinks=infoLinks}}
-      {{es-footer/es-statement tagline=tagline socialLinks=socialLinks}}
-      {{es-footer/es-contributions contributorLinks=contributorLinks}}
+  <hr class="footer-hr">
 
-    {{/unless}}
-
-  </div>
+  {{es-footer/es-contributions contributorLinks=contributorLinks}}
 </footer>

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

@@ -1,13 +1,12 @@
-
-{{#if hasBlock}}
-  {{yield}}
-{{else}}
-  {{#each contributorLinks as |link|}}
-    <div class="contributor">
-      <p>{{link.name}}</p>
-      <a href={{link.href}} title={{link.title}} aria-label={{link.title}}>
-        {{svg-jar link.class class="contributor-logo"}}
-      </a>
+<div class="footer-contributions-wrapper">
+  <div class="footer-contributions container">
+    <span>Ember is generously supported by</span>
+    <div>
+      {{#each args.contributorLinks as |link|}}
+        <a href={{link.href}} title={{link.title}} aria-label={{link.title}} class="icon-wrapper large margin-left-xsmall">
+          {{svg-jar link.class class="icon" }}
+        </a>
+      {{/each}}
     </div>
-  {{/each}}
-{{/if}}
+  </div>
+</div>

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

@@ -1,14 +1,9 @@
+<div class="footer-info container">
+  <img src="/images/ember-logo.svg" alt="Ember Logo" class="footer-logo margin-right-medium">
 
-Copyright {{currentYear}}
-{{#if hasBlock}}
-  {{yield}}
-{{else}}
-  {{#each infoLinks as |link index|}}
-    <a href={{link.href}}>{{link.name}}</a>
-    {{#if link.lineBreak}}
-      <br>
-    {{else if (not-eq index infoLinksLastIndex)}}
-      |
-    {{/if}}
-  {{/each}}
-{{/if}}
+  <div class="footer-info-links">
+    {{#each args.infoLinks as |link|}}
+      <a href={{link.href}} class="small margin-bottom-xsmall margin-left-xsmall">{{link.name}}</a>
+    {{/each}}
+  </div>
+</div>

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

@@ -1,13 +1,15 @@
-
-{{#if hasBlock}}
-  {{yield}}
-{{else}}
-  <p class="footer-tagline">{{tagline}}</p>
+<div class="footer-statement container">
+  <div>
+    <p class="footer-copyright">
+      &copy; Copyright {{currentYear}} - <a href="https://www.tilde.io/" class="footer-copyright">Tilde Inc.</a>
+    </p>
+    <p class="footer-tagline">{{args.tagline}}</p>
+  </div>
   <div class="footer-social">
-    {{#each socialLinks as |link|}}
-      <a href={{link.href}} title={{link.title}} aria-label={{link.label}}>
-        {{svg-jar link.class}}
+    {{#each args.socialLinks as |link|}}
+      <a href={{link.href}} title={{link.title}} aria-label={{link.label}} class="icon-wrapper margin-xsmall small">
+        {{svg-jar link.class class="icon" }}
       </a>
     {{/each}}
   </div>
-{{/if}}
+</div>

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

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-footer/es-contributions';

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

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-footer/es-info';

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

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-footer/es-statement';

docs/components/footer.md

@@ -3,40 +3,3 @@
 ```handlebars
 {{es-footer}}
 ```
-
-```handlebars
-{{es-footer tagline="A framework for ambitious web developers"}}
-```
-
-```handlebars
-{{!-- Check out the component blocks and their respective
-configuration --}}
-{{#es-footer as |f|}}
-  {{f.info infoLinks=infoLinks}}
-  {{f.statement socialLinks=socialLinks}}
-  {{f.contributions contributorLinks=contributorLinks}}
-{{/es-footer}}
-```
-
-```handlebars
-{{!-- You can also add your own content on each component block --}}
-{{#es-footer as |f|}}
-  {{#f.info}}
-    <br/>
-    <a>Team</a>
-    <br/>
-    <a>Contact</a>
-  {{/f.info}}
-  {{#f.statement}}
-    Highly Productive Out of the Box
-  {{/f.statement}}
-  {{#f.contributions}}
-    <div class="contributor">
-      <p>Hosted by:</p>
-      <a href="https://www.heroku.com/emberjs">
-        {{svg-jar "heroku-logo" class="contributor-logo"}}
-      </a>
-    </div>
-  {{/f.contributions}}
-{{/es-footer}}
-```