Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 674f8e9

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /