Skip to content

Commit 674f8e9

Browse files
zoltantothcomzoltantothcom
committed
Active link highlight
1 parent aa8b32c commit 674f8e9

File tree

3 files changed

+142
-75
lines changed

3 files changed

+142
-75
lines changed

‎__tests__/Layout.test.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,12 @@ describe('Layout', () => {
6464
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
6565
});
6666

67-
it('renders 2 links', () => {
68-
expect(tree.find('a')).toHaveLength(2);
67+
it('renders 1 link', () => {
68+
expect(tree.find('header a')).toHaveLength(1);
69+
});
70+
71+
it('renders 1 span', () => {
72+
expect(tree.find('header span')).toHaveLength(1);
6973
});
7074

7175
it('renders 2 toggle buttons', () => {
@@ -102,8 +106,12 @@ describe('Layout', () => {
102106
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
103107
});
104108

105-
it('renders 2 links', () => {
106-
expect(tree.find('a')).toHaveLength(2);
109+
it('renders 1 link', () => {
110+
expect(tree.find('header a')).toHaveLength(1);
111+
});
112+
113+
it('renders 1 span', () => {
114+
expect(tree.find('header span')).toHaveLength(1);
107115
});
108116

109117
it('renders 2 toggle buttons', () => {

‎__tests__/components/__snapshots__/Header.test.js.snap‎

Lines changed: 80 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`<Header /> component renders with DARK theme 1`] = `
4-
.c4 {
4+
.c5 {
55
background-color: #222222;
66
border: 1px solid #484848;
77
border-radius: 50%;
@@ -13,41 +13,41 @@ exports[`<Header /> component renders with DARK theme 1`] = `
1313
width: 2.5rem;
1414
}
1515
16-
.c4:hover {
16+
.c5:hover {
1717
background-color: #484848;
1818
}
1919
20-
.c4:hover svg,
21-
.c4:hover g {
20+
.c5:hover svg,
21+
.c5:hover g {
2222
fill: #ffffff;
2323
}
2424
25-
.c4.active {
25+
.c5.active {
2626
background-color: #e22a23;
2727
border-color: #e22a23;
2828
}
2929
30-
.c4.active svg,
31-
.c4.active g {
30+
.c5.active svg,
31+
.c5.active g {
3232
fill: #ffffff;
3333
}
3434
35-
.c4.light {
35+
.c5.light {
3636
background-color: #ffffff;
3737
border-color: #c4c4c4;
3838
}
3939
40-
.c4.light svg,
41-
.c4.light g {
40+
.c5.light svg,
41+
.c5.light g {
4242
fill: #707070;
4343
}
4444
45-
.c4.light:hover svg,
46-
.c4.light:hover g {
45+
.c5.light:hover svg,
46+
.c5.light:hover g {
4747
fill: #707070;
4848
}
4949
50-
.c5 {
50+
.c6 {
5151
font-family: 'Karla',sans-serif;
5252
padding: 1.5rem;
5353
border-radius: 4px;
@@ -84,14 +84,14 @@ exports[`<Header /> component renders with DARK theme 1`] = `
8484
display: inline-flex;
8585
}
8686
87-
.c3 {
87+
.c4 {
8888
display: -webkit-inline-box;
8989
display: -webkit-inline-flex;
9090
display: -ms-inline-flexbox;
9191
display: inline-flex;
9292
}
9393
94-
.c2 {
94+
.c3 {
9595
border-bottom: 1px solid transparent;
9696
color: #888888;
9797
display: -webkit-inline-box;
@@ -105,11 +105,26 @@ exports[`<Header /> component renders with DARK theme 1`] = `
105105
text-decoration: none;
106106
}
107107
108-
.c2:hover {
108+
.c3:hover {
109109
border-bottom: 1px solid #f5f5f5;
110110
color: #f5f5f5;
111111
}
112112
113+
.c2 {
114+
border-bottom: 1px solid transparent;
115+
color: #888888;
116+
display: -webkit-inline-box;
117+
display: -webkit-inline-flex;
118+
display: -ms-inline-flexbox;
119+
display: inline-flex;
120+
font-size: 0.875rem;
121+
margin: 0.5rem 2rem 0 0;
122+
padding-bottom: 1px;
123+
-webkit-text-decoration: none;
124+
text-decoration: none;
125+
color: #f5f5f5;
126+
}
127+
113128
@media (min-width:769px) {
114129
.c0 {
115130
-webkit-box-pack: justify;
@@ -120,32 +135,30 @@ exports[`<Header /> component renders with DARK theme 1`] = `
120135
}
121136
122137
<div>
123-
<div
138+
<header
124139
className="c0"
125140
>
126141
<div
127142
className="c1"
128143
>
129-
<a
144+
<span
130145
className="c2"
131-
href="/"
132-
onClick={[Function]}
133146
>
134147
Game
135-
</a>
148+
</span>
136149
<a
137-
className="c2"
150+
className="c3"
138151
href="/about"
139152
onClick={[Function]}
140153
>
141154
About
142155
</a>
143156
</div>
144157
<div
145-
className="c3"
158+
className="c4"
146159
>
147160
<button
148-
className="c4"
161+
className="c5"
149162
onClick={[Function]}
150163
>
151164
<svg
@@ -172,7 +185,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
172185
</svg>
173186
</button>
174187
<button
175-
className="c4"
188+
className="c5"
176189
onClick={[Function]}
177190
>
178191
<svg
@@ -194,16 +207,16 @@ exports[`<Header /> component renders with DARK theme 1`] = `
194207
</button>
195208
</div>
196209
<h1
197-
className="c5"
210+
className="c6"
198211
>
199212
JavaScript Design Patterns
200213
</h1>
201-
</div>
214+
</header>
202215
</div>
203216
`;
204217

205218
exports[`<Header /> component renders with LIGHT theme 1`] = `
206-
.c4 {
219+
.c5 {
207220
background-color: #f4f4f4;
208221
border: 1px solid #e8e8e8;
209222
border-radius: 50%;
@@ -215,41 +228,41 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
215228
width: 2.5rem;
216229
}
217230
218-
.c4:hover {
231+
.c5:hover {
219232
background-color: #e8e8e8;
220233
}
221234
222-
.c4:hover svg,
223-
.c4:hover g {
235+
.c5:hover svg,
236+
.c5:hover g {
224237
fill: #ffffff;
225238
}
226239
227-
.c4.active {
240+
.c5.active {
228241
background-color: #e22a23;
229242
border-color: #e22a23;
230243
}
231244
232-
.c4.active svg,
233-
.c4.active g {
245+
.c5.active svg,
246+
.c5.active g {
234247
fill: #ffffff;
235248
}
236249
237-
.c4.light {
250+
.c5.light {
238251
background-color: #ffffff;
239252
border-color: #aaaaaa;
240253
}
241254
242-
.c4.light svg,
243-
.c4.light g {
255+
.c5.light svg,
256+
.c5.light g {
244257
fill: #cccccc;
245258
}
246259
247-
.c4.light:hover svg,
248-
.c4.light:hover g {
260+
.c5.light:hover svg,
261+
.c5.light:hover g {
249262
fill: #cccccc;
250263
}
251264
252-
.c5 {
265+
.c6 {
253266
font-family: 'Karla',sans-serif;
254267
padding: 1.5rem;
255268
border-radius: 4px;
@@ -286,14 +299,14 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
286299
display: inline-flex;
287300
}
288301
289-
.c3 {
302+
.c4 {
290303
display: -webkit-inline-box;
291304
display: -webkit-inline-flex;
292305
display: -ms-inline-flexbox;
293306
display: inline-flex;
294307
}
295308
296-
.c2 {
309+
.c3 {
297310
border-bottom: 1px solid transparent;
298311
color: #e22a23;
299312
display: -webkit-inline-box;
@@ -307,11 +320,26 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
307320
text-decoration: none;
308321
}
309322
310-
.c2:hover {
323+
.c3:hover {
311324
border-bottom: 1px solid #707070;
312325
color: #707070;
313326
}
314327
328+
.c2 {
329+
border-bottom: 1px solid transparent;
330+
color: #e22a23;
331+
display: -webkit-inline-box;
332+
display: -webkit-inline-flex;
333+
display: -ms-inline-flexbox;
334+
display: inline-flex;
335+
font-size: 0.875rem;
336+
margin: 0.5rem 2rem 0 0;
337+
padding-bottom: 1px;
338+
-webkit-text-decoration: none;
339+
text-decoration: none;
340+
color: #707070;
341+
}
342+
315343
@media (min-width:769px) {
316344
.c0 {
317345
-webkit-box-pack: justify;
@@ -322,32 +350,30 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
322350
}
323351
324352
<div>
325-
<div
353+
<header
326354
className="c0"
327355
>
328356
<div
329357
className="c1"
330358
>
331-
<a
359+
<span
332360
className="c2"
333-
href="/"
334-
onClick={[Function]}
335361
>
336362
Game
337-
</a>
363+
</span>
338364
<a
339-
className="c2"
365+
className="c3"
340366
href="/about"
341367
onClick={[Function]}
342368
>
343369
About
344370
</a>
345371
</div>
346372
<div
347-
className="c3"
373+
className="c4"
348374
>
349375
<button
350-
className="c4"
376+
className="c5"
351377
onClick={[Function]}
352378
>
353379
<svg
@@ -374,7 +400,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
374400
</svg>
375401
</button>
376402
<button
377-
className="c4"
403+
className="c5"
378404
onClick={[Function]}
379405
>
380406
<svg
@@ -396,10 +422,10 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
396422
</button>
397423
</div>
398424
<h1
399-
className="c5"
425+
className="c6"
400426
>
401427
JavaScript Design Patterns
402428
</h1>
403-
</div>
429+
</header>
404430
</div>
405431
`;

0 commit comments

Comments
 (0)