add social links with icon componet to header (#249)

* add social links with icone componet to header * clean up * stab at fixing the svgs so they render * change lit-element tag from html to svg and resize * change out the svg icons * clean up * fightig the good fight with the 200 line max * try the simple stuff first... * fix the poor octo-cat, maybe the twitter bird apears? * new twitter svg - fingers crossed this one works * fine tine the styling of the social bar & icons * clean up, add icon padding, center align nav text * indentation
ProjectEvergreen · Oct 30, 2019 · 89cad00 · 89cad00
1 parent 721f552
commit 89cad00
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 9 deletions.
diff --git a/www/components/header/header.css b/www/components/header/header.css
@@ -23,6 +23,12 @@
       display: flex;
       align-items:center;
       flex-wrap:wrap;
+      justify-content: space-between;
+
+      @media (max-width:768px) {
+        flex-direction:column;
+        text-align: center;
+      }
     }
 
     & nav {
@@ -32,6 +38,7 @@
         padding:0;
         margin:0;
         list-style: none;
+        text-align: center;
         & li {
           margin:0;
           color:white;
@@ -45,6 +52,9 @@
           }
         }
       }
+      @media (max-width: 768px) {
+        width:100%;
+      }
     }
     & .brand {
       justify-items: left;
@@ -64,4 +74,4 @@
       }
     }
   }
-}
+}
diff --git a/www/components/header/header.js b/www/components/header/header.js
@@ -3,6 +3,7 @@ import '@evergreen-wc/eve-container';
 
 import headerCss from './header.css';
 import brand from '../../assets/brand.png';
+import '../components/social-icons/social-icons';
 
 class HeaderComponent extends LitElement {
   render() {
@@ -30,14 +31,7 @@ class HeaderComponent extends LitElement {
                 <li><a href="/plugins">Plugins</a></li>
               </ul>
             </nav>
-            <div class="social">
-              <a href="https://github.com/ProjectEvergreen/greenwood">
-                <img
-                  src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github"
-                  alt="Greenwood GitHub Star Counter"
-                />
-              </a>
-            </div>
+            <eve-socialicons></eve-socialicons>
           </div>
         </eve-container>
       </header>

diff --git a/www/components/icons/github-icon.js b/www/components/icons/github-icon.js
@@ -0,0 +1,22 @@
+import { svg } from 'lit-element';
+
+const githubIcon = svg`<svg
+  height="35"
+  viewBox="0 0 16 16"
+  version="1.1"
+  width="35"
+  aria-hidden="true">
+    <path
+      fill-rule="evenodd"
+      fill="white"
+      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
+      0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
+      1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
+      0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82
+      2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65
+      3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013
+      8.013 0 0016 8c0-4.42-3.58-8-8-8z">
+    </path>
+  </svg>`;
+
+export default githubIcon;
diff --git a/www/components/icons/slack-icon.js b/www/components/icons/slack-icon.js
@@ -0,0 +1,39 @@
+import { svg } from 'lit-element';
+
+const slackIcon = svg`<svg
+  width="35"
+  height="35"
+  style="fill:white;"
+  viewBox="0 0 54 54"
+  xmlns="http://www.w3.org/2000/svg">
+    <g
+    fill="none"
+    fill-rule="evenodd">
+      <path
+        d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376
+        5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381
+        5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381
+        0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386"
+        fill="#fff"></path>
+      <path
+        d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376
+        5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381
+        0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0
+        5.376 5.387 5.381 5.381 0 0 0 5.376-5.387"
+        fill="#fff"></path>
+      <path
+        d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0
+        0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381
+        5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381
+        0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386"
+        fill="#fff"></path>
+      <path
+        d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0
+        5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381
+        5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381
+        0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387"
+        fill="#fff"></path>
+    </g>
+  </svg>`;
+
+export default slackIcon;
diff --git a/www/components/icons/twitter-icon.js b/www/components/icons/twitter-icon.js
@@ -0,0 +1,28 @@
+import { svg } from 'lit-element';
+
+const twitterIcon = svg`<?xml version="1.0" ?>
+  <!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+  <svg
+    enable-background="new 0 0 56.693 56.693"
+    height="40px"
+    id="Layer_1"
+    version="1.1"
+    viewBox="0 0 56.693 56.693"
+    width="40px"
+    fill="white"
+    xml:space="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+      <path
+        d="M28.348,5.157c-13.6,0-24.625,11.027-24.625,24.625c0,13.6,11.025,24.623,24.625,24.623c13.6,0,24.623-11.023,24.623-24.623
+        C52.971,16.184,41.947,5.157,28.348,5.157z M40.752,24.817c0.013,0.266,0.018,0.533,0.018,0.803c0,8.201-6.242,17.656-17.656,17.656
+        c-3.504,0-6.767-1.027-9.513-2.787c0.486,0.057,0.979,0.086,1.48,0.086c2.908,0,5.584-0.992,7.707-2.656
+        c-2.715-0.051-5.006-1.846-5.796-4.311c0.378,0.074,0.767,0.111,1.167,0.111c0.566,0,1.114-0.074,1.635-0.217
+        c-2.84-0.57-4.979-3.08-4.979-6.084c0-0.027,0-0.053,0.001-0.08c0.836,0.465,1.793,0.744,2.811,0.777
+        c-1.666-1.115-2.761-3.012-2.761-5.166c0-1.137,0.306-2.204,0.84-3.12c3.061,3.754,7.634,6.225,12.792,6.483
+        c-0.106-0.453-0.161-0.928-0.161-1.414c0-3.426,2.778-6.205,6.206-6.205c1.785,0,3.397,0.754,4.529,1.959
+        c1.414-0.277,2.742-0.795,3.941-1.506c-0.465,1.45-1.448,2.666-2.73,3.433c1.257-0.15,2.453-0.484,3.565-0.977
+        C43.018,22.849,41.965,23.942,40.752,24.817z"/>
+  </svg>`;
+
+export default twitterIcon;
diff --git a/www/components/social-icons/social-icons.css b/www/components/social-icons/social-icons.css
@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+
+  & .icons {
+    margin: auto;
+  }
+  & .slack-icon {
+    padding: 0 1rem 0 1.25rem;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: row;
+  }
+}
diff --git a/www/components/social-icons/social-icons.js b/www/components/social-icons/social-icons.js
@@ -0,0 +1,24 @@
+import { html, LitElement } from 'lit-element';
+import css from './social-icons.css';
+import githubIcon from '../icons/github-icon';
+import twitterIcon from '../icons/twitter-icon';
+import slackIcon from '../icons/slack-icon';
+
+class SocialIcons extends LitElement {
+  render() {
+    return html`
+    <style>
+      ${css}
+    </style>
+        <a class="icons" href="https://github.com/ProjectEvergreen" target="_blank" rel=”noreferrer noopener” aria-label="open github page">${githubIcon}</a>
+        <a href="https://join.slack.com/t/thegreenhouseio/shared_invite/enQtMzcyMzE2Mjk1MjgwLTU5YmM1MDJiMTg0ODk4MjA4NzUwNWFmZmMxNDY5MTcwM2I0MjYxN2VhOTEwNDU2YWQwOWQzZmY1YzY4MWRlOGI"
+         class="icons slack-icon"
+         target="_blank"
+         rel=”noreferrer noopener”
+         aria-label="slack">${slackIcon}</a>
+        <a href="https://twitter.com/PrjEvergreen" target="_blank" rel=”noreferrer noopener” aria-label="open twitter page">${twitterIcon}</a>
+    `;
+  }
+}
+
+customElements.define('eve-socialicons', SocialIcons);