Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit 8aa3b28

Browse files
AugustinMauroyshanpriyanovflowd
authored
feat(styled header) (#3011)
Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Co-authored-by: Claudio Wunder <cwunder@gnome.org>
1 parent b5874e9 commit 8aa3b28

File tree

14 files changed

+112
-64
lines changed

14 files changed

+112
-64
lines changed

‎src/layouts/__tests__/__snapshots__/page.test.tsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -257,11 +257,13 @@ exports[`PageLayout component renders correctly with data 1`] = `
257257
<article
258258
class="article"
259259
>
260-
<h1
261-
class="headline"
262-
>
263-
mock-title
264-
</h1>
260+
<header>
261+
<h1
262+
class="headline"
263+
>
264+
mock-title
265+
</h1>
266+
</header>
265267
<div
266268
class="authorList"
267269
>

‎src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,13 @@ exports[`Governance Page renders correctly 1`] = `
169169
<article
170170
class="article"
171171
>
172-
<h1
173-
class="headline"
174-
>
175-
Mock Title
176-
</h1>
172+
<header>
173+
<h1
174+
class="headline"
175+
>
176+
Mock Title
177+
</h1>
178+
</header>
177179
<div />
178180
<div />
179181
<div>

‎src/pages/about/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,13 @@ exports[`About page renders correctly 1`] = `
169169
<article
170170
class="article"
171171
>
172-
<h1
173-
class="headline"
174-
>
175-
Mock Title
176-
</h1>
172+
<header>
173+
<h1
174+
class="headline"
175+
>
176+
Mock Title
177+
</h1>
178+
</header>
177179
<div />
178180
<div />
179181
<div>

‎src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,13 @@ exports[`Releases page renders correctly 1`] = `
169169
<article
170170
class="article"
171171
>
172-
<h1
173-
class="headline"
174-
>
175-
Mock Title
176-
</h1>
172+
<header>
173+
<h1
174+
class="headline"
175+
>
176+
Mock Title
177+
</h1>
178+
</header>
177179
<div />
178180
<div />
179181
<div>

‎src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -419,11 +419,13 @@ exports[`Resources page renders correctly 1`] = `
419419
<article
420420
class="article"
421421
>
422-
<h1
423-
class="headline"
424-
>
425-
Mock Title
426-
</h1>
422+
<header>
423+
<h1
424+
class="headline"
425+
>
426+
Mock Title
427+
</h1>
428+
</header>
427429
<div />
428430
<div />
429431
<div>

‎src/pages/about/__tests__/__snapshots__/security.test.tsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,13 @@ exports[`Security page renders correctly 1`] = `
169169
<article
170170
class="article"
171171
>
172-
<h1
173-
class="headline"
174-
>
175-
Mock Title
176-
</h1>
172+
<header>
173+
<h1
174+
class="headline"
175+
>
176+
Mock Title
177+
</h1>
178+
</header>
177179
<div />
178180
<div />
179181
<div>

‎src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -419,11 +419,13 @@ exports[`Package Manager Page renders correctly 1`] = `
419419
<article
420420
class="article"
421421
>
422-
<h1
423-
class="headline"
424-
>
425-
Mock Title
426-
</h1>
422+
<header>
423+
<h1
424+
class="headline"
425+
>
426+
Mock Title
427+
</h1>
428+
</header>
427429
<div />
428430
<div />
429431
<div>

‎src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ exports[`Article component renders correctly 1`] = `
55
<article
66
class="article"
77
>
8-
<h1
9-
class="headline"
10-
>
11-
test-title
12-
</h1>
8+
<header>
9+
<h1
10+
class="headline"
11+
>
12+
test-title
13+
</h1>
14+
</header>
1315
<div
1416
class="authorList"
1517
>
@@ -199,11 +201,13 @@ exports[`Article component renders correctly in blog mode 1`] = `
199201
<article
200202
class="article"
201203
>
202-
<h1
203-
class="headline"
204-
>
205-
test-title
206-
</h1>
204+
<header>
205+
<h1
206+
class="headline"
207+
>
208+
test-title
209+
</h1>
210+
</header>
207211
<h5
208212
class="list"
209213
>
@@ -296,11 +300,13 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
296300
<article
297301
class="article"
298302
>
299-
<h1
300-
class="headline"
301-
>
302-
test-title
303-
</h1>
303+
<header>
304+
<h1
305+
class="headline"
306+
>
307+
test-title
308+
</h1>
309+
</header>
304310
<div
305311
class="authorList"
306312
>
@@ -490,11 +496,13 @@ exports[`Article component should accept and render child components 1`] = `
490496
<article
491497
class="article"
492498
>
493-
<h1
494-
class="headline"
495-
>
496-
test-title
497-
</h1>
499+
<header>
500+
<h1
501+
class="headline"
502+
>
503+
test-title
504+
</h1>
505+
</header>
498506
<div
499507
class="authorList"
500508
>

‎src/sections/Article/index.module.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@
44
padding: var(--space-48) var(--space-32) var(--space-48) var(--space-32);
55
width: calc(100vw - 36rem);
66

7+
header {
8+
background: url('/static/images/header.svg');
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
margin: -50px -25px;
12+
padding: 50px 25px;
13+
}
14+
715
.headline {
816
margin: 0 0 var(--space-40) 0;
917
padding: 0;

‎src/sections/Article/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import styles from './index.module.scss';
1212

1313
interface Props {
1414
title: string;
15+
description?: string;
1516
body: string;
1617
authors: string[] | BlogPostAuthor[];
1718
tableOfContents: TableOfContentsItem[];
@@ -44,6 +45,7 @@ const renderTOC = (tableOfContents: TableOfContentsItem[] | undefined) => (
4445

4546
const Article = ({
4647
title,
48+
description,
4749
body,
4850
tableOfContents,
4951
previous,
@@ -61,7 +63,10 @@ const Article = ({
6163
}: Props): JSX.Element => (
6264
<article className={styles.article}>
6365
{childrenPosition === 'before' && children && <div>{children}</div>}
64-
<h1 className={styles.headline}>{title}</h1>
66+
<header>
67+
<h1 className={styles.headline}>{title}</h1>
68+
{description && <p>{description}</p>}
69+
</header>
6570
{blog
6671
? renderBlogAuthors(date, authors as BlogPostAuthor[])
6772
: renderArticleAuthors(authors as string[])}

0 commit comments

Comments
 (0)