From 737b583118b44c07d32cab7f72bbd7ff83acf31a Mon Sep 17 00:00:00 2001
From: Emmanuel Yupit <emmanuelyupit08@gmail.com>
Date: Mon, 9 Jul 2018 21:19:28 -0500
Subject: [PATCH 1/3] styled component from Emmanuel Pacheco Yupit

---
 session3/styledComponents/src/App.js          | 47 +++++++++----------
 session3/styledComponents/src/App.style.js    |  9 ++++
 .../src/components/NavbarList/index.js        | 14 ++++++
 .../src/components/NavbarList/index.style.js  | 33 +++++++++++++
 4 files changed, 77 insertions(+), 26 deletions(-)
 create mode 100644 session3/styledComponents/src/App.style.js
 create mode 100644 session3/styledComponents/src/components/NavbarList/index.js
 create mode 100644 session3/styledComponents/src/components/NavbarList/index.style.js

diff --git a/session3/styledComponents/src/App.js b/session3/styledComponents/src/App.js
index 4beb5cbb..cd1d5b13 100755
--- a/session3/styledComponents/src/App.js
+++ b/session3/styledComponents/src/App.js
@@ -1,41 +1,36 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-import './App.css'
+import React, { Component } from 'react';
+import './App.css';
+import NavbarList from './components/NavbarList';
 
-const getLinks = () => [ { label: 'Home', url: '/' }, { label: 'Woof!', url: '/dog' }, { label: 'Hello!', url: '/hello' } ]
+const getLinks = () => [
+  { label: 'Home', url: '/' },
+  { label: 'Woof!', url: '/dog' },
+  { label: 'Hello!', url: '/hello' },
+];
 
 class App extends Component {
-  constructor (props) {
-    super(props)
+  constructor(props) {
+    super(props);
     this.state = {
       selected: '/',
-      links: []
-    }
-    this.renderLinks = this.renderLinks.bind(this)
+      links: [],
+    };
+    this.renderLinks = this.renderLinks.bind(this);
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.setState({
-      links: getLinks()
-    })
+      links: getLinks(),
+    });
   }
 
-  renderLinks () {
-    return this.state.links.map(({url, label}) => (
-      <li className='link' key={url}>
-        <Link to={url}>{label}</Link>
-        <span className='border' />
-      </li>
-    ))
+  renderLinks() {
+    return this.state.links.map(link => <NavbarList link={link} />);
   }
 
-  render () {
-    return (
-      <ul className='nav'>
-        {this.renderLinks()}
-      </ul>
-    )
+  render() {
+    return <ul className="nav">{this.renderLinks()}</ul>;
   }
 }
 
-export default App
+export default App;
diff --git a/session3/styledComponents/src/App.style.js b/session3/styledComponents/src/App.style.js
new file mode 100644
index 00000000..bc76d806
--- /dev/null
+++ b/session3/styledComponents/src/App.style.js
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Nav = styled.ul`
+  font-family: 'Trebuchet MS';
+  font-size: 17px;
+  list-style: none;
+  margin-top: 20px;
+  text-align: center;
+`;
diff --git a/session3/styledComponents/src/components/NavbarList/index.js b/session3/styledComponents/src/components/NavbarList/index.js
new file mode 100644
index 00000000..1fbda0c1
--- /dev/null
+++ b/session3/styledComponents/src/components/NavbarList/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { List, Link } from './index.style';
+
+const NavbarList = ({ link }) => {
+  const { url, label } = link;
+  return (
+    <List>
+      <Link to={url}>{label}</Link>
+      <span />
+    </List>
+  );
+};
+
+export default NavbarList;
diff --git a/session3/styledComponents/src/components/NavbarList/index.style.js b/session3/styledComponents/src/components/NavbarList/index.style.js
new file mode 100644
index 00000000..902bb68a
--- /dev/null
+++ b/session3/styledComponents/src/components/NavbarList/index.style.js
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const List = styled.li`
+  display: inline;
+  position: relative;
+
+  span {
+    background: #0088cc;
+    bottom: -10px;
+    display: block;
+    height: 4px;
+    left: 10px;
+    position: absolute;
+    width: calc(100% - 23px);
+  }
+`;
+
+export const Link = styled(RouterLink)`
+  color: #333;
+  display: inline-block;
+  padding: 10px;
+  text-decoration: none;
+
+  :hover {
+    color: #0088cc;
+  }
+
+  :hover ~ span {
+    animation: ul 0.3s ease-out;
+    background: #333;
+  }
+`;

From c3ad6c016eedf5f960edec6c396c2243b269c9ce Mon Sep 17 00:00:00 2001
From: Emmanuel Yupit <emmanuelyupit08@gmail.com>
Date: Mon, 9 Jul 2018 21:25:52 -0500
Subject: [PATCH 2/3] App.css removed from App.js only using styled components

---
 session3/styledComponents/src/App.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/session3/styledComponents/src/App.js b/session3/styledComponents/src/App.js
index cd1d5b13..9beed292 100755
--- a/session3/styledComponents/src/App.js
+++ b/session3/styledComponents/src/App.js
@@ -1,6 +1,18 @@
 import React, { Component } from 'react';
-import './App.css';
+import { injectGlobal } from 'styled-components';
 import NavbarList from './components/NavbarList';
+import { Nav } from './App.style';
+
+injectGlobal`
+ul {
+  0% { 
+   width:0;
+ }
+ 100% { 
+   width:calc(100% - 23px);
+ }
+}
+`;
 
 const getLinks = () => [
   { label: 'Home', url: '/' },
@@ -29,7 +41,7 @@ class App extends Component {
   }
 
   render() {
-    return <ul className="nav">{this.renderLinks()}</ul>;
+    return <Nav>{this.renderLinks()}</Nav>;
   }
 }
 

From 3ded90d9644a0b538c8d444e95cefbdd15968d97 Mon Sep 17 00:00:00 2001
From: Emmanuel Yupit <emmanuelyupit08@gmail.com>
Date: Tue, 10 Jul 2018 00:06:44 -0500
Subject: [PATCH 3/3] keyframes fixed

---
 session3/styledComponents/src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/session3/styledComponents/src/App.js b/session3/styledComponents/src/App.js
index 9beed292..545591e2 100755
--- a/session3/styledComponents/src/App.js
+++ b/session3/styledComponents/src/App.js
@@ -4,7 +4,7 @@ import NavbarList from './components/NavbarList';
 import { Nav } from './App.style';
 
 injectGlobal`
-ul {
+@keyframes ul {
   0% { 
    width:0;
  }