Session 3 - styled components

session3/styledComponents/src/App.css

@@ -1,51 +0,0 @@
-.nav {
-  font-family:'Trebuchet MS';
-  font-size:17px;
-  list-style:none;
-  margin-top:20px;
-  text-align:center;
-}
-
-.link {
-  display:inline;
-  position:relative;
-}
-
-.link a {
-  color:#333;
-  display:inline-block;
-  padding:10px;
-  text-decoration:none;
-}
-
-.selected a {
- 	color:#0088CC;
-}
-
-.border {
-  background:#0088CC;
-  bottom:-10px;
-  display:block;
-  height:4px;
-  left:10px;
-  position:absolute;
-  width:calc(100% - 23px);
-}
-
-.link a:hover {
- 	color:#0088CC;
-}
-
-.link a:hover ~ .border{
- 	 animation:ul 0.3s ease-out;
-   background:#333;
-}
-
-@keyframes ul {
- 	0% { 
-    width:0;
-  }
-  100% { 
-    width:calc(100% - 23px);
-  }
-}

session3/styledComponents/src/App.js

@@ -1,41 +1,42 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-import './App.css'
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { NavStyled, BorderStyled, LinkStyled } from "./App.styled";
+// import "./App.css";
 
-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: '/',
+      selected: "/",
       links: []
-    }
-    this.renderLinks = this.renderLinks.bind(this)
+    };
+    this.renderLinks = this.renderLinks.bind(this);
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.setState({
       links: getLinks()
-    })
+    });
   }
 
-  renderLinks () {
-    return this.state.links.map(({url, label}) => (
-      <li className='link' key={url}>
+  renderLinks() {
+    return this.state.links.map(({ url, label }) => (
+      <LinkStyled selected={this.state.selected === url} key={url}>
         <Link to={url}>{label}</Link>
-        <span className='border' />
-      </li>
-    ))
+        <BorderStyled />
+      </LinkStyled>
+    ));
   }
 
-  render () {
-    return (
-      <ul className='nav'>
-        {this.renderLinks()}
-      </ul>
-    )
+  render() {
+    return <NavStyled>{this.renderLinks()}</NavStyled>;
   }
 }
 
-export default App
+export default App;

session3/styledComponents/src/App.styled.js

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+
+const NavStyled = styled.ul`
+  font-family: "SoberanaSans";
+  font-size: 17px;
+  list-style: none;
+  margin-top: 20px;
+  text-align: center;
+`;
+
+const BorderStyled = styled.span`
+  background: #0088cc;
+  bottom: -10px;
+  display: block;
+  height: 4px;
+  left: 10px;
+  position: absolute;
+  width: calc(100% - 23px);
+`;
+
+const LinkStyled = styled.li`
+  display: inline;
+  position: relative;
+
+  & > a {
+    color: ${props => (!props.selected ? "#333" : "#0088cc")};
+    display: inline-block;
+    padding: 10px;
+    text-decoration: none;
+  }
+
+  & > a:hover {
+    color: #0088cc;
+  }
+
+  & > a:hover ~ ${BorderStyled} {
+    animation: ul 0.3s ease-out;
+    background: #333;
+  }
+
+  @keyframes ul {
+    0% {
+      width: 0;
+    }
+    100% {
+      width: calc(100% - 23px);
+    }
+  }
+`;
+
+export { NavStyled, LinkStyled, BorderStyled };

session3/styledComponents/src/global.js

@@ -0,0 +1,9 @@
+import { injectGlobal } from "styled-components";
+import SoberanaSans from "./fonts/soberanasans-regular-webfont.ttf";
+
+injectGlobal`
+    @font-face {
+        font-family: MyFont;
+        src: url('${SoberanaSans}');
+    }
+`;

session3/styledComponents/src/index.js

@@ -1,21 +1,23 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
-import registerServiceWorker from './registerServiceWorker'
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import "./global";
+import App from "./App";
+import registerServiceWorker from "./registerServiceWorker";
+
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 
 const Routes = () => (
   <BrowserRouter>
     <Switch>
-      <Route exact path='/' component={App} />
-      <Route path='/hello' component={() => <p>Hello!</p>} />
-      <Route path='/dog' component={() => <p>Woof!</p>} />
+      <Route exact path="/" component={App} />
+      <Route path="/hello" component={() => <p>Hello!</p>} />
+      <Route path="/dog" component={() => <p>Woof!</p>} />
       <Route component={() => <p>404</p>} status={404} />
     </Switch>
   </BrowserRouter>
-)
+);
 
-ReactDOM.render(<Routes />, document.getElementById('root'))
+ReactDOM.render(<Routes />, document.getElementById("root"));
 
-registerServiceWorker()
+registerServiceWorker();