Skip to content

Commit 0819a4f

Browse files
JamieB-guJamieB-gu
authored
Add styles to dev server (#14277)
Styles the new docs pages on the dev server to make them easier to read and so that they work across all breakpoints.
1 parent 151a7ca commit 0819a4f

File tree

4 files changed

+105
-20
lines changed

4 files changed

+105
-20
lines changed

‎dotcom-rendering/src/devServer/docs/article.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Available } from './available';
2+
import { descriptionLinks } from './styles';
23

34
const OtherExamples = () => (
45
<>
56
<h3>Other Examples</h3>
6-
<dl>
7+
<dl css={descriptionLinks}>
78
<dt>
89
<a href="https://www.theguardian.com/tone/minutebyminute">
910
Minute-by-minute tag page

‎dotcom-rendering/src/devServer/docs/available.tsx

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { space, textEgyptianBold17Object } from '@guardian/source/foundations';
2+
13
type Target = 'dotcom' | 'live apps' | 'editions app' | 'amp';
24

35
const href = (target: Target): string => {
@@ -27,9 +29,22 @@ function* links(targets: Target[]) {
2729

2830
export const Available = ({ targets }: { targets: Target[] }) => (
2931
<dl>
30-
<dt>Available targets</dt>
31-
<dd>
32-
<ul>{Array.from(links(targets))}</ul>
32+
<dt css={textEgyptianBold17Object}>Available targets:</dt>
33+
<dd
34+
css={{
35+
margin: 0,
36+
}}
37+
>
38+
<ul
39+
css={{
40+
listStyle: 'none',
41+
padding: 0,
42+
display: 'flex',
43+
gap: space[3],
44+
}}
45+
>
46+
{Array.from(links(targets))}
47+
</ul>
3348
</dd>
3449
</dl>
3550
);

‎dotcom-rendering/src/devServer/docs/doc.tsx

Lines changed: 74 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1+
import { css } from '@emotion/react';
2+
import {
3+
article17Object,
4+
headlineBold24Object,
5+
headlineMedium20Object,
6+
headlineMedium24Object,
7+
headlineMedium34Object,
8+
palette,
9+
space,
10+
} from '@guardian/source/foundations';
111
import type { ReactNode } from 'react';
12+
import { grid } from '../../grid';
213

314
const Charset = () => <meta charSet="UTF-8" />;
415

@@ -16,25 +27,72 @@ const Head = ({ title, path }: { title: string; path: string }) => (
1627
);
1728

1829
const Body = ({ title, children }: { title: string; children: ReactNode }) => (
19-
<body>
20-
<nav>
21-
<ul>
22-
<li>
23-
<a href="/">Home</a>
24-
</li>
25-
<li>
26-
<a href="/pages">Pages</a>
27-
</li>
28-
<li>
29-
<a href="/targets">Targets</a>
30-
</li>
31-
</ul>
32-
</nav>
33-
<h1>{title}</h1>
34-
{children}
30+
<body
31+
css={{
32+
h1: headlineMedium34Object,
33+
h2: {
34+
...headlineMedium24Object,
35+
borderBottomWidth: 1,
36+
borderBottomStyle: 'solid',
37+
borderBottomColor: palette.neutral[86],
38+
marginTop: space[9],
39+
marginBottom: 0,
40+
},
41+
h3: headlineMedium20Object,
42+
a: {
43+
color: palette.brand[400],
44+
textUnderlineOffset: 5,
45+
},
46+
['&']: css(grid.container),
47+
margin: 0,
48+
...article17Object,
49+
}}
50+
>
51+
<Nav />
52+
<main css={grid.column.centre}>
53+
<h1>{title}</h1>
54+
{children}
55+
</main>
3556
</body>
3657
);
3758

59+
const Nav = () => (
60+
<nav
61+
css={{
62+
a: {
63+
textDecoration: 'none',
64+
color: palette.neutral[100],
65+
},
66+
display: 'grid',
67+
gridTemplateColumns: 'subgrid',
68+
['&']: css(grid.column.all),
69+
backgroundColor: palette.brand[400],
70+
...headlineBold24Object,
71+
}}
72+
>
73+
<ul
74+
css={{
75+
listStyle: 'none',
76+
padding: 0,
77+
margin: `${space[3]}px 0`,
78+
display: 'flex',
79+
gap: space[6],
80+
['&']: css(grid.column.centre),
81+
}}
82+
>
83+
<li>
84+
<a href="/">Home</a>
85+
</li>
86+
<li>
87+
<a href="/pages">Pages</a>
88+
</li>
89+
<li>
90+
<a href="/targets">Targets</a>
91+
</li>
92+
</ul>
93+
</nav>
94+
);
95+
3896
export const Doc = ({
3997
title,
4098
path,

‎dotcom-rendering/src/devServer/docs/styles.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { css } from '@emotion/react';
2+
import { space } from '@guardian/source/foundations';
3+
4+
export const descriptionLinks = css({
5+
dt: {
6+
paddingBottom: space[1],
7+
},
8+
dd: {
9+
paddingBottom: space[1],
10+
},
11+
});

0 commit comments

Comments
 (0)