Issue 72 online presence icons and links

README.md

@@ -37,6 +37,10 @@ Replace
     "teamMembers": [
       { "name": "Example Member1", "link": "https://github.com/examplemember1" },
       { "name": "Example Member2", "link": "https://github.com/examplemember2" }
+    ],
+    "socialLinks": [
+      { "name": "medium", "link": "https://medium.com/" },
+      { "name": "github", "link": "https://github.com/" }
     ]
   },
   "products": [
@@ -85,6 +89,7 @@ Replace
 | `proxyURL`                      | CORS proxy url. Required for Medium API access E.g. https://github.com/c-hive/cors-proxy                                                                               | `string / url`         | **No**   |
 | `header.technologies`           | Technologies used by team/user/company.                                                                                                                                | `array`                | **No**   |
 | `header.teamMembers`            | Team member(s) name and link.                                                                                                                                          | `object`               | **No**   |
+| `header.socialLinks`            | Team online presence.                                                                                                                                          | `object`               | **No**   |
 | `products.name`            | Product name. (This is required if you create a product entry)                                                                                                                                          | `string`               | **Yes**   |
 | `products.cover`            | Product cover image.                                                                                                                                          | `string / path to img`               | **No**   |
 | `products.description`            | Product description                                                                                                                                          | `string`               | **No**   |

src/components/Header/Header.js

@@ -4,13 +4,15 @@ import settings from "../../../settings/settings.json";
 import {
   headerStyle,
   headerIconsContainerStyle,
+  socialIconsWrapperStyle,
   logoTextStyle,
   logoStyle,
 } from "./Header.style";
 import ToggleButton from "./ToggleButton/ToggleButton";
 import TechIcons from "./TechIcons/TechIcons";
 import TechNames from "./TechNames/TechNames";
 import TeamMembers from "./TeamMembers/TeamMembers";
+import SocialIcons from "../UI/SocialIcons/SocialIcons";
 
 const Header = styled.div`
   ${headerStyle}
@@ -20,6 +22,10 @@ const HeaderIconsContainer = styled.div`
   ${headerIconsContainerStyle}
 `;
 
+const SocialIconsWrapper = styled.div`
+  ${socialIconsWrapperStyle}
+`;
+
 const LogoText = styled.p`
   ${logoTextStyle}
 `;
@@ -37,6 +43,11 @@ const header = () => (
       <HeaderIconsContainer>
         {settings.display === "icon" ? <TechIcons /> : <TechNames />}
         {settings.header.teamMembers ? <TeamMembers /> : null}
+        {settings.socialIcons && (
+          <SocialIconsWrapper>
+            <SocialIcons links={settings.header.socialLinks} />
+          </SocialIconsWrapper>
+        )}
       </HeaderIconsContainer>
     ) : null}
   </Header>

src/components/Header/Header.style.js

@@ -5,7 +5,7 @@ export const headerIconsContainerStyle = css`
   align-items: center;
   flex-basis: 100%;
   width: 100%;
-  margin: 0px 0 10px 20px;
+  margin: 0px 20px 10px 20px;
 
   .border {
     border-left: 1px solid ${props => props.theme.color};
@@ -16,6 +16,14 @@ export const headerIconsContainerStyle = css`
   }
 `;
 
+export const socialIconsWrapperStyle = css`
+  margin-left: auto;
+
+  .MuiIconButton-root {
+    margin-right: 4px;
+  }
+`;
+
 export const headerStyle = css`
   display: flex;
   flex-wrap: wrap;

src/components/Products/Product/Product.js

@@ -1,12 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  IconButton,
-} from "@material-ui/core/";
+import { Card, CardActions, CardContent, CardMedia } from "@material-ui/core/";
 import {
   productStyle,
   productTitleStyle,
@@ -15,6 +9,7 @@ import {
 } from "./Product.style";
 import IconDisplayer from "../../UI/Icons/IconDisplayer";
 import settings from "../../../../settings/settings";
+import SocialIcons from "../../UI/SocialIcons/SocialIcons";
 
 const Product = styled.div`
   ${productStyle}
@@ -64,29 +59,7 @@ const product = ({ name, cover, description, technologies, socialLinks }) => {
         {socialLinks && (
           <CardActions>
             <ActionTechIcons className="action__techIcons">
-              {socialLinks.map(social =>
-                settings.socialIcons[social.name] ? (
-                  <IconButton
-                    key={social.name}
-                    href={social.link}
-                    aria-label={social.name}
-                    size="small"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <IconDisplayer
-                      key={social.name}
-                      name={settings.socialIcons[social.name].name}
-                      src={settings.socialIcons[social.name].icon}
-                    />
-                  </IconButton>
-                ) : (
-                  /* eslint-disable-next-line no-console */
-                  console.warn(
-                    `There is no icon path specified in the settings for ${social.name} social icon`
-                  )
-                )
-              )}
+              <SocialIcons links={socialLinks} />
             </ActionTechIcons>
           </CardActions>
         )}

src/components/Products/Product/Product.style.js

@@ -45,10 +45,6 @@ export const technologiesIconsContainerStyle = css`
 `;
 
 export const actionTechIconsStyle = css`
-  a {
-    display: inline-block;
-  }
-
   img {
     width: 28px;
     height: 28px;

src/components/UI/SocialIcons/SocialIcons.js

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+import { IconButton } from "@material-ui/core/";
+import { socialIconsStyle } from "./SocialIcons.style";
+import IconDisplayer from "../Icons/IconDisplayer";
+import settings from "../../../../settings/settings";
+
+const SocialIcons = styled.div`
+  ${socialIconsStyle}
+`;
+
+const socialIcons = ({ links }) => {
+  return (
+    <SocialIcons>
+      {links.map(social =>
+        settings.socialIcons[social.name] ? (
+          <IconButton
+            key={social.name}
+            href={social.link}
+            aria-label={social.name}
+            size="small"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <IconDisplayer
+              key={social.name}
+              name={settings.socialIcons[social.name].name}
+              src={settings.socialIcons[social.name].icon}
+            />
+          </IconButton>
+        ) : (
+          /* eslint-disable-next-line no-console */
+          console.warn(
+            `There is no icon path specified in the settings for ${social.name} social icon`
+          )
+        )
+      )}
+    </SocialIcons>
+  );
+};
+
+export default socialIcons;

src/components/UI/SocialIcons/SocialIcons.style.js

@@ -0,0 +1,7 @@
+import { css } from "styled-components";
+
+export const socialIconsStyle = css`
+  a {
+    display: inline-block;
+  }
+`;