diff --git a/__tests__/Layout.test.js b/__tests__/Layout.test.js index 19c0893..49c518a 100644 --- a/__tests__/Layout.test.js +++ b/__tests__/Layout.test.js @@ -64,8 +64,12 @@ describe('Layout', () => { expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns'); }); - it('renders 2 links', () => { - expect(tree.find('a')).toHaveLength(2); + it('renders 1 link', () => { + expect(tree.find('header a')).toHaveLength(1); + }); + + it('renders 1 span', () => { + expect(tree.find('header span')).toHaveLength(1); }); it('renders 2 toggle buttons', () => { @@ -102,8 +106,12 @@ describe('Layout', () => { expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns'); }); - it('renders 2 links', () => { - expect(tree.find('a')).toHaveLength(2); + it('renders 1 link', () => { + expect(tree.find('header a')).toHaveLength(1); + }); + + it('renders 1 span', () => { + expect(tree.find('header span')).toHaveLength(1); }); it('renders 2 toggle buttons', () => { diff --git a/__tests__/components/__snapshots__/Header.test.js.snap b/__tests__/components/__snapshots__/Header.test.js.snap index dda338e..972fb35 100644 --- a/__tests__/components/__snapshots__/Header.test.js.snap +++ b/__tests__/components/__snapshots__/Header.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`
component renders with DARK theme 1`] = ` -.c4 { +.c5 { background-color: #222222; border: 1px solid #484848; border-radius: 50%; @@ -13,41 +13,41 @@ exports[`
component renders with DARK theme 1`] = ` width: 2.5rem; } -.c4:hover { +.c5:hover { background-color: #484848; } -.c4:hover svg, -.c4:hover g { +.c5:hover svg, +.c5:hover g { fill: #ffffff; } -.c4.active { +.c5.active { background-color: #e22a23; border-color: #e22a23; } -.c4.active svg, -.c4.active g { +.c5.active svg, +.c5.active g { fill: #ffffff; } -.c4.light { +.c5.light { background-color: #ffffff; border-color: #c4c4c4; } -.c4.light svg, -.c4.light g { +.c5.light svg, +.c5.light g { fill: #707070; } -.c4.light:hover svg, -.c4.light:hover g { +.c5.light:hover svg, +.c5.light:hover g { fill: #707070; } -.c5 { +.c6 { font-family: 'Karla',sans-serif; padding: 1.5rem; border-radius: 4px; @@ -84,14 +84,14 @@ exports[`
component renders with DARK theme 1`] = ` display: inline-flex; } -.c3 { +.c4 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c2 { +.c3 { border-bottom: 1px solid transparent; color: #888888; display: -webkit-inline-box; @@ -105,11 +105,26 @@ exports[`
component renders with DARK theme 1`] = ` text-decoration: none; } -.c2:hover { +.c3:hover { border-bottom: 1px solid #f5f5f5; color: #f5f5f5; } +.c2 { + border-bottom: 1px solid transparent; + color: #888888; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 0.875rem; + margin: 0.5rem 2rem 0 0; + padding-bottom: 1px; + -webkit-text-decoration: none; + text-decoration: none; + color: #f5f5f5; +} + @media (min-width:769px) { .c0 { -webkit-box-pack: justify; @@ -120,21 +135,19 @@ exports[`
component renders with DARK theme 1`] = ` }
-

JavaScript Design Patterns

-
+
`; exports[`
component renders with LIGHT theme 1`] = ` -.c4 { +.c5 { background-color: #f4f4f4; border: 1px solid #e8e8e8; border-radius: 50%; @@ -215,41 +228,41 @@ exports[`
component renders with LIGHT theme 1`] = ` width: 2.5rem; } -.c4:hover { +.c5:hover { background-color: #e8e8e8; } -.c4:hover svg, -.c4:hover g { +.c5:hover svg, +.c5:hover g { fill: #ffffff; } -.c4.active { +.c5.active { background-color: #e22a23; border-color: #e22a23; } -.c4.active svg, -.c4.active g { +.c5.active svg, +.c5.active g { fill: #ffffff; } -.c4.light { +.c5.light { background-color: #ffffff; border-color: #aaaaaa; } -.c4.light svg, -.c4.light g { +.c5.light svg, +.c5.light g { fill: #cccccc; } -.c4.light:hover svg, -.c4.light:hover g { +.c5.light:hover svg, +.c5.light:hover g { fill: #cccccc; } -.c5 { +.c6 { font-family: 'Karla',sans-serif; padding: 1.5rem; border-radius: 4px; @@ -286,14 +299,14 @@ exports[`
component renders with LIGHT theme 1`] = ` display: inline-flex; } -.c3 { +.c4 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c2 { +.c3 { border-bottom: 1px solid transparent; color: #e22a23; display: -webkit-inline-box; @@ -307,11 +320,26 @@ exports[`
component renders with LIGHT theme 1`] = ` text-decoration: none; } -.c2:hover { +.c3:hover { border-bottom: 1px solid #707070; color: #707070; } +.c2 { + border-bottom: 1px solid transparent; + color: #e22a23; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 0.875rem; + margin: 0.5rem 2rem 0 0; + padding-bottom: 1px; + -webkit-text-decoration: none; + text-decoration: none; + color: #707070; +} + @media (min-width:769px) { .c0 { -webkit-box-pack: justify; @@ -322,21 +350,19 @@ exports[`
component renders with LIGHT theme 1`] = ` }
-

JavaScript Design Patterns

-
+
`; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 9868153..9a88476 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,10 +1,11 @@ import React from 'react'; +import PropTypes from 'prop-types'; import styled, { css } from 'styled-components'; -import { Route, Link } from 'react-router-dom'; +import { Route, withRouter, Link } from 'react-router-dom'; import Toggle from './Toggle'; import Title from './Title'; -const StyledHeader = styled.div` +const StyledHeader = styled.header` align-items: center; display: flex; flex-wrap: wrap; @@ -32,31 +33,63 @@ const linkStyle = css` margin: 0.5rem 2rem 0 0; padding-bottom: 1px; text-decoration: none; +`; +const StyledRouterLink = styled(Link)` + ${linkStyle} &:hover { border-bottom: 1px solid ${props => props.theme.buttonColor}; color: ${props => props.theme.buttonColor}; } `; -const StyledRouterLink = styled(Link)` +const StyledRouterSpan = styled.span` ${linkStyle} + color: ${props => props.theme.buttonColor}; `; -const Header = () => ( - - - Game - About - +const Header = props => { + const { + location: { pathname } + } = props; + + const paths = [ + { + path: '/', + page: 'Game' + }, + { + path: '/about', + page: 'About' + } + ]; + + return ( + + + {paths.map(({ path, page }) => + pathname === path ? ( + {page} + ) : ( + + {page} + + ) + )} + + + + } /> + + - - } /> - - + + </StyledHeader> + ); +}; - <Title /> - </StyledHeader> -); +Header.propTypes = { + location: PropTypes.object.isRequired +}; -export default Header; +export default withRouter(Header);