social component

src/components/atoms/FadeIn.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CSSTransition } from 'react-transition-group'
+import CSSTransition from 'react-transition-group/CSSTransition'
 import './FadeIn.css'
 
 const FadeIn = (props) => (

src/components/molecules/Header.js

@@ -1,17 +1,7 @@
 import React from 'react'
+import Social from './Social'
 import './Header.css'
-import { meta, social } from '../../constants'
+import { meta } from '../../constants'
-import { Twitter, GitHub, Facebook } from '../atoms/Icons'
-
-const SocialIcon = ({title}) => {
-  if (title === 'Twitter') {
-    return <Twitter />
-  } else if (title === 'GitHub') {
-    return <GitHub />
-  } else if (title === 'Facebook') {
-    return <Facebook />
-  }
-}
 
 const Header = () => (
   <header className="header">
@@ -20,13 +10,8 @@ const Header = () => (
       <h1 className="header__title">{meta.title}</h1>
       <p className="header__description">{meta.tagline}</p>
     </hgroup>
-    <aside className="social">
+
-      {social.map(link => (
+    <Social />
-        <a className="social__link" href={link.url} key={link.title} title={link.title}>
-          <SocialIcon title={link.title} />
-        </a>
-      ))}
-    </aside>
   </header>
 )
 

src/components/molecules/Header.scss

@@ -37,20 +37,3 @@
 .header__description {
     font-size: $font-size-large;
 }
-
-.social { // stylelint-disable-line
-    margin-top: $spacer;
-}
-
-.social__link {
-    margin-left: $spacer / 2;
-    margin-right: $spacer / 2;
-    background: $brand-grey-dimmed;
-    padding: $spacer / 4;
-    text-align: center;
-    display: inline-block;
-    width: 1.35rem;
-    height: 1.35rem;
-    box-shadow: 0 1px 3px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .15);
-    border-radius: .25rem;
-}

src/components/molecules/Social.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Twitter, GitHub, Facebook } from '../atoms/Icons'
+import { social } from '../../constants'
+import './Social.css'
+
+const SocialIcon = ({ title }) => {
+  if (title === 'Twitter') {
+    return <Twitter />
+  } else if (title === 'GitHub') {
+    return <GitHub />
+  } else if (title === 'Facebook') {
+    return <Facebook />
+  }
+}
+
+const Social = () => (
+  <aside className="social">
+    {social.map(link => (
+      <a className="social__link" href={link.url} key={link.title} title={link.title}>
+        <SocialIcon title={link.title} />
+      </a>
+    ))}
+  </aside>
+)
+
+export default Social

src/components/molecules/Social.scss

@@ -0,0 +1,24 @@
+@import 'variables';
+
+.social {
+    margin-top: $spacer;
+}
+
+.social__link {
+    margin-left: $spacer / 2;
+    margin-right: $spacer / 2;
+    background: $brand-grey-dimmed;
+    padding: $spacer / 4;
+    text-align: center;
+    display: inline-block;
+    width: 1.35rem;
+    height: 1.35rem;
+    box-shadow: 0 3px 5px rgba($brand-main, .1), 0 5px 16px rgba($brand-main, .1);
+    border-radius: .25rem;
+
+    &:hover,
+    &:focus {
+        transform: translate3d(0, -.2rem, 0);
+        box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
+    }
+}