footer component

app/components/footer/bootstrap.yaml

@@ -1,3 +1,5 @@
 _components:
   footer:
-    footerLinks: []
+    svgLogo: ''
+    logoUrl: ''
+    navegationLinks: []

app/components/footer/client.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const _find = require('lodash/find'),
+  $popup = require('../../services/client/popup');
+
+module.exports = (el) => {
+  const socialMediaButtons = el.querySelectorAll('.social-media-btn'),
+    // new social media network should also be added to 'socialMediaLinks in schema.yaml'
+    supportedSocialNetworks = [
+      {
+        className: 'facebook',
+        url: 'https://facebook.com/{handle}',
+        network: 'Facebook'
+      },
+      {
+        className: 'instagram',
+        url: 'https://www.instagram.com/{handle}',
+        network: 'Instagram'
+      },
+      {
+        className: 'twitter',
+        url: 'https://twitter.com/intent/follow?screen_name={handle}&tw_p=followbutton&variant=2.0',
+        network: 'Twitter'
+      }
+    ];
+
+  if (socialMediaButtons) {
+    socialMediaButtons.forEach((element)=>{
+      element.addEventListener('click', (e) => {
+        let Position = $popup.position,
+          Params = $popup.params,
+          opts = {},
+          dimensions = { width: 780, height: 500 },
+          features = new Position(dimensions.width, dimensions.height),
+          classList = e.currentTarget.classList,
+          args,
+          socialHandler,
+          socialNetworks = supportedSocialNetworks;
+
+        opts.handle = e.currentTarget.getAttribute('data-handle');
+
+        dimensions.left = features.left;
+        dimensions.top = features.top;
+
+        socialHandler = _find(socialNetworks, function (socialNetwork) {
+          return classList.contains(socialNetwork.className);
+        });
+
+        opts.url = socialHandler.url.replace('{handle}', opts.handle);
+        opts.network = socialHandler.network;
+
+        opts.name = 'Follow ' + opts.handle + ' on ' + opts.network;
+        args = new Params(opts, dimensions);
+        window.open(args.address, args.name, args.features);
+        e.preventDefault();
+      });
+    });
+  }
+};

app/components/footer/schema.yaml

@@ -1,8 +1,47 @@
 _description: |
-  footer
+  The footer at the bottom of all pages.
+_confirmRemoval: true
 
-footerLinks:
-  _label: Footer Links
+socialMediaNetworks:
+  _label: Social Media Links
+  _placeholder:
+    text: New Follow
+    height: 56px
+  _has:
+    input: complex-list
+    props:
+      -
+        prop: socialMediaNetwork
+        _label: socialMediaNetwork
+        _has:
+          input: radio
+          help: Select the network for this follow button
+          options: # new social media network should also be added to 'supportedSocialNetworks' in client.js
+                - name: 'Facebook'
+                  value: 'facebook'
+                - name: 'Twitter'
+                  value: 'twitter'
+                - name: 'Instagram'
+                  value: 'instagram'
+      -
+        prop: handle
+        _label: Social Media Handle
+        _has:
+            input: text
+            validate:
+              required: true
+      -
+        prop: icon
+        _label: Social Media Icon
+        _has:
+            input: text
+            help: Support SVG
+
+navegationLinks:
+  _label: Navegation Links
+  _placeholder:
+    text: Navegation Links
+    height: 56px
   _has:
     input: complex-list
     props:
@@ -11,7 +50,7 @@ footerLinks:
         _label: Url
         _has:
           input: text
-          type: url
+          help: Example https://domain.com
           validate:
             required: true
       -
@@ -25,7 +64,29 @@ footerLinks:
             max: 40
             maxMessage: This field must be 40 or fewer characters long
 
+svgLogo:
+  _label: Site Logo
+  _placeholder:
+    height: 56px
+  _has:
+    input: text
+    help: Support SVG
+
+logoUrl:
+  _label: Logo URL
+  _placeholder:
+    height: 56px
+  _has:
+    input: text
+    help: Example https://domain.com
+
 _groups:
   settings:
     fields:
-      - footerLinks
+      - svgLogo (General)
+      - logoUrl (General)
+      - navegationLinks (Navegation Links)
+    _placeholder:
+      text: Footer
+      height: 30px
+      ifEmpty: logoUrl AND svgLogo

app/components/footer/template.hbs

@@ -1,10 +1,36 @@
-<div data-uri="{{ default _ref _self }}" class="footer" data-editable="settings">
-
-  <ul class="footer-social" data-editable="footerLinks">
-    {{> component-list footerLinks }}
-  </ul>
+<div data-uri="{{ default _ref _self }}" class="footer">
+  <div class="footer-settings-wrapper" data-editable="settings">
+     {{#if logoUrl }}
+      <a class="footer-logo" href="{{ logoUrl }}">
+        {{#if svgLogo }}
+          {{{ svgLogo }}}
+        {{else}}
+          {{{ read (concat 'public/media/sites/' @root.locals.site.slug '/logo.svg') }}}
+        {{/if}}
+      </a>
+    {{/if}}
+    {{#if navegationLinks.length}}
+      <div class="links-wrapper">
+        <ul class="links">
+          {{#each navegationLinks}}
+            <li class="link-item">
+              <a href="{{ url }}">{{ text }}</a>
+            </li>
+          {{/each}}
+        </ul>
+      </div>
+    {{/if}}
+  </div>
 
-  <div class="copyright">
-    Built in {{ moment 'now' 'YYYY' }} with Clay
+  <div class="" data-editable="socialMediaNetworks">
+    {{#each socialMediaNetworks}}
+      <button data-handle="{{ handle }}" class="social-media-circle social-media-btn {{ socialMediaNetwork }}">
+        {{#if icon}}
+          {{{ icon }}}
+        {{else}}
+          {{{ read (concat 'public/media/sites/' @root.locals.site.slug '/' socialMediaNetwork '.svg') }}}
+        </a>
+      {{/if}}
+    {{/each}}
   </div>
 </div>

app/services/client/popup.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const $window = typeof window !== 'undefined' ? window : undefined;
+
+class Popup {
+  constructor() {
+    /**
+     * returns an object of new window options
+     * @param {{ url: String, name: string }} opts - Object containing
+     * @param {Object} dimensions - An object of new window options, including dimensions & position
+     * @returns {Object}
+     */
+    this.params = (opts, dimensions) => {
+      if (opts.url) {
+        this.address = opts.url;
+      }
+
+      if (opts.name) {
+        this.name = opts.name;
+      }
+
+      this.features = 'width=' + (dimensions.width || 0) + ',height=' + (dimensions.height || 0) + ',top=' + (dimensions.top || 0) + ',left=' + (dimensions.left || 0);
+
+      return this;
+    };
+
+    /**
+      * returns an object of screen dimensions
+      * @returns {{ dualScreenLeft: number, dualScreenTop: number, width: number, height: number }}
+    */
+    this.getScreenDimensions = () => {
+      const usesScreenForDimensions = $window.hasOwnProperty('screen') && $window.screen.hasOwnProperty('screenTop');
+      let dualScreenLeft,
+        dualScreenTop;
+
+      if (usesScreenForDimensions) {
+        dualScreenLeft = $window.screen.left;
+        dualScreenTop = $window.screen.top;
+      } else {
+        dualScreenLeft = $window.screenLeft;
+        dualScreenTop = $window.screenTop;
+      }
+
+      return {
+        dualScreenLeft: dualScreenLeft || 0,
+        dualScreenTop: dualScreenTop || 0,
+        width: $window.innerWidth || $window.screen.width,
+        height: $window.innerHeight || $window.screen.height
+      };
+    };
+
+    /**
+     * returns an object of numbers used for positioning a new window
+     * @param {Number} newWidth - the current window's width
+     * @param {Number} newHeight - the current window's height
+     * @returns {Object}
+     */
+    this.position = (newWidth, newHeight) => {
+      let dimensions = this.getScreenDimensions();
+
+      this.left = Math.floor(Math.max(dimensions.width / 2 - newWidth / 2 + dimensions.dualScreenLeft, 0));
+      this.top = Math.floor(Math.max(dimensions.height / 2 - newHeight / 2 + dimensions.dualScreenTop, 0));
+
+      return this;
+    };
+  }
+}
+
+module.exports = new Popup;

app/styleguides/_default/components/footer.css

@@ -1,53 +1,54 @@
 .footer {
-  .logo-wrapper {
-    margin: 0 auto 15px auto;
-    width: 112px;
+  margin: 20px;
+  text-align: center;
+
+  .links {
+    display: inline;
+    width: 33px;
+    height: 14px;
+    font-family: Helvetica;
+    font-size: 12px;
+    letter-spacing: 2px;
   }
 
-  .follow-icons {
-    margin: 0 0 7px;
-    text-align: center;
+  .link-item {
+    display: inline;
+    margin: 6px 13px;
+    text-transform: uppercase
   }
 
-  .links {
-    display: flex;
-    flex-wrap: wrap;
-    font: bold 14px / 39px GroteskNarrow, sans-serif;
-    justify-content: center;
-    letter-spacing: 4px;
-    text-transform: uppercase;
-
-    a {
-      margin: 0 14px;
-      text-decoration: none;
-    }
-
-    a:visited {
-      color: black;
-    }
-  }
-
-  .copyright {
-    font: 500 9px / 25px Grotesk, sans-serif;
-    letter-spacing: 3px;
-    margin: 0 0 21px;
-    text-align: center;
-    text-transform: uppercase;
+   a {
+    color: #000;
+    text-decoration: none;
   }
-}
 
-@media screen and (min-width: 1180px) {
-  .footer {
-    .logo-wrapper {
-      margin: 0 auto 22px auto;
-    }
+  & .footer-logo svg {
+    height: 74px;
+    width: 340px;
+  }
 
-    .follow-icons {
-      margin: 0 0 40px;
-    }
+  .links-wrapper {
+    margin: 20px
+  }
 
-    .links {
-      font: 19px GroteskNarrow, sans-serif;
-    }
+  .social-media-btn:hover svg circle {
+    fill: #acca59;
   }
-}
+
+  .social-media-btn {
+    margin: 10px
+  }
+
+  .footer-settings-wrapper {
+    margin: 10px 0;
+  }
+
+  .social-media-circle {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    height: 39px;
+    padding: 0;
+    width: 39px;
+  }
+}

app/styleguides/_default/layouts/layout.css

@@ -52,10 +52,9 @@ html {
     margin: auto;
   }
 
-  & > .page-header,
   & > .top {
     margin: 20px auto;
-    width: $wrapperMaxWidth;
+    width: 1100px;
   }
 
   & > .bottom {