Skip to content

Commit ec26514

Browse files
willemliufdmgwillemliufdmg
authored
Merge pull request #54 from FDMediagroep/develop
Develop
2 parents 15d78c6 + 967530e commit ec26514

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+497
-193
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fdmg/design-system",
3-
"version": "0.4.15",
3+
"version": "0.4.16",
44
"description": "FD Design System",
55
"types": "main.d.ts",
66
"main": "main.js",

‎src/components/Menu.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
}
9191

9292
legend {
93-
color: var(--credits);
93+
color: var(--writer);
9494
// IE11
9595
@media screen and (-ms-high-contrast: active),
9696
(-ms-high-contrast: none) {

‎src/components/article-latest-news/ArticleLatestNews.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
}
108108

109109
time {
110-
color: var(--credits);
110+
color: var(--writer);
111111
// IE11
112112
@media screen and (-ms-high-contrast: active),
113113
(-ms-high-contrast: none) {

‎src/components/article-meta/ArticleMeta.module.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
1-
@import "../../utils/map-deep-get.scss";
2-
@import "../../design-tokens/colors.scss";
3-
@import "../../design-tokens/media.scss";
4-
@import "../../design-tokens/typography.scss";
1+
@import '../../utils/map-deep-get.scss';
2+
@import '../../design-tokens/colors.scss';
3+
@import '../../design-tokens/media.scss';
4+
@import '../../design-tokens/typography.scss';
55

66
.meta {
77
display: flex;
88
justify-content: space-between;
99
margin: 1rem 0;
1010
font-size: 0.8125rem;
11-
@media screen and (min-width: map-deep-get($media, "sizes", "s")) {
11+
@media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
1212
font-size: 0.875rem;
1313
}
1414
line-height: 1.2;
15-
font-family: map-deep-get($typography, "font-family", "regular"), sans-serif;
16-
color: var(--credits);
15+
font-family: map-deep-get($typography, 'font-family', 'regular'), sans-serif;
16+
color: var(--writer);
1717
// IE11
1818
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
19-
color: #{map-deep-get($colors, "colors", "neutrals", 30)};
19+
color: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
2020
}
2121

2222
a.author:hover {
2323
color: var(--primary);
2424
// IE11
2525
@media screen and (-ms-high-contrast: active),
2626
(-ms-high-contrast: none) {
27-
color: #{map-deep-get($colors, "colors", "primary", 75)};
27+
color: #{map-deep-get($colors, 'colors', 'primary', 75)};
2828
}
2929
}
3030

@@ -33,11 +33,11 @@
3333
// IE11
3434
@media screen and (-ms-high-contrast: active),
3535
(-ms-high-contrast: none) {
36-
color: #{map-deep-get($colors, "colors", "neutrals", 30)};
36+
color: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
3737
}
3838
text-decoration: none;
3939
&:not(:first-child):before {
40-
content: ", ";
40+
content: ', ';
4141
}
4242
}
4343
}

‎src/components/input/TextArea.module.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
display: inline-block;
77
p {
88
font-size: 0.75rem;
9-
color: var(--credits);
9+
color: var(--writer);
1010
// IE11
1111
@media screen and (-ms-high-contrast: active),
1212
(-ms-high-contrast: none) {
@@ -129,7 +129,7 @@
129129
line-height: 1;
130130
padding: 0.5rem 1rem 0.5rem 1rem;
131131
transition: all 0.1s ease-out;
132-
color: var(--credits);
132+
color: var(--writer);
133133
// IE11
134134
@media screen and (-ms-high-contrast: active),
135135
(-ms-high-contrast: none) {
@@ -179,7 +179,7 @@
179179
.textareaMessage {
180180
transition: all 0.3s ease-out;
181181
font-size: 0.75rem;
182-
color: var(--credits);
182+
color: var(--writer);
183183
// IE11
184184
@media screen and (-ms-high-contrast: active),
185185
(-ms-high-contrast: none) {

‎src/components/input/TextInput.module.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
display: inline-block;
77
p {
88
font-size: 0.75rem;
9-
color: var(--credits);
9+
color: var(--writer);
1010
// IE11
1111
@media screen and (-ms-high-contrast: active),
1212
(-ms-high-contrast: none) {
@@ -133,7 +133,7 @@
133133
line-height: 1;
134134
padding: 0;
135135
transition: all 0.1s ease-out;
136-
color: var(--credits);
136+
color: var(--writer);
137137
// IE11
138138
@media screen and (-ms-high-contrast: active),
139139
(-ms-high-contrast: none) {
@@ -183,7 +183,7 @@
183183
.inputMessage {
184184
transition: all 0.3s ease-out;
185185
font-size: 0.75rem;
186-
color: var(--credits);
186+
color: var(--writer);
187187
// IE11
188188
@media screen and (-ms-high-contrast: active),
189189
(-ms-high-contrast: none) {

‎src/design-tokens/design-tokens.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
--textframe: #{map-deep-get($colors, 'colors', 'neutrals', 90)};
5454
--wordframe: #{map-deep-get($colors, 'colors', 'neutrals', 90)};
5555
--functional-copy: #{map-deep-get($colors, 'colors', 'neutrals', 90)};
56-
--captions: #{map-deep-get($colors, 'colors', 'neutrals', 40)};
57-
--credits: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
56+
--captions: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
57+
--credits: #{map-deep-get($colors, 'colors', 'neutrals', 40)};
5858
--writer: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
5959
--time: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
6060
--card: #{map-deep-get($colors, 'colors', 'neutrals', 10)};
@@ -151,8 +151,8 @@
151151
--textframe: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
152152
--wordframe: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
153153
--functional-copy: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
154-
--captions: #{map-deep-get($colors, 'colors', 'neutrals', 20)};
155-
--credits: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
154+
--captions: #{map-deep-get($colors, 'colors', 'neutrals', 40)};
155+
--credits: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
156156
--writer: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
157157
--time: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
158158
--card: #{map-deep-get($colors, 'colors', 'neutrals', 90)};
@@ -251,8 +251,8 @@
251251
--textframe: #{map-deep-get($colors, 'colors', 'neutrals', 90)};
252252
--wordframe: #{map-deep-get($colors, 'colors', 'neutrals', 90)};
253253
--functional-copy: #{map-deep-get($colors, 'colors', 'neutrals', 90)};
254-
--captions: #{map-deep-get($colors, 'colors', 'neutrals', 40)};
255-
--credits: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
254+
--captions: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
255+
--credits: #{map-deep-get($colors, 'colors', 'neutrals', 40)};
256256
--writer: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
257257
--time: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
258258
--card: #{map-deep-get($colors, 'colors', 'neutrals', 10)};
@@ -347,8 +347,8 @@
347347
--textframe: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
348348
--wordframe: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
349349
--functional-copy: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
350-
--captions: #{map-deep-get($colors, 'colors', 'neutrals', 20)};
351-
--credits: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
350+
--captions: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
351+
--credits: #{map-deep-get($colors, 'colors', 'neutrals', 50)};
352352
--writer: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
353353
--time: #{map-deep-get($colors, 'colors', 'neutrals', 30)};
354354
--card: #{map-deep-get($colors, 'colors', 'neutrals', 90)};

‎src/pages/_app.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@ function App({ Component, pageProps }) {
4848
name="viewport"
4949
content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"
5050
/>
51-
52-
<title>
53-
FD Design System - Design System - Het Financieele Dagblad
54-
</title>
5551
</Head>
5652
<section className={pageStyle}>
5753
<aside>

‎src/pages/_document.tsx

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ export default class MyDocument extends Document<any> {
66
return (
77
<Html lang="nl">
88
<Head>
9-
<meta
10-
name="description"
11-
content="Collection of all the styled components for FD.nl"
12-
/>
13-
149
<link href="/favicon.ico" rel="shortcut icon" />
1510
<link
1611
rel="apple-touch-icon"
@@ -91,48 +86,24 @@ export default class MyDocument extends Document<any> {
9186
<script src="/assets/cssbeautify.js" />
9287
<link href="/assets/fonts/style.css" rel="stylesheet" />
9388

94-
<meta property="og:title" content="FD Design System" />
95-
96-
<meta
97-
property="og:description"
98-
content="Collection of all the styled components for FD.nl"
99-
/>
100-
101-
<meta
102-
property="og:site_name"
103-
content="design-system.fd.nl"
104-
/>
89+
<meta property="og:site_name" content="FD Design System" />
10590

10691
<meta property="og:type" content="article" />
10792

108-
<meta
109-
property="og:url"
110-
content="https://design-system.fd.nl"
111-
/>
112-
11393
<meta
11494
property="og:image"
11595
content="/assets/images/default-share.png"
11696
/>
11797

11898
<meta property="twitter:name" content="summary" />
11999

120-
<meta property="twitter:title" content="FD Design System" />
121-
122-
<meta
123-
property="twitter:site"
124-
content="design-system.fd.nl"
125-
/>
100+
<meta property="twitter:site" content="FD Design System" />
126101

127102
<meta
128103
property="twitter:image"
129104
content="/assets/images/default-share.png"
130105
/>
131106

132-
<meta
133-
property="twitter:description"
134-
content="Collection of all the styled components for FD.nl"
135-
/>
136107
<script
137108
dangerouslySetInnerHTML={{
138109
__html: `try {

‎src/pages/ab.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ interface Props {
99
cookies: { [cookieName: string]: string };
1010
}
1111

12+
const metaTitle = 'A/B';
13+
const metaDescription = 'A/B, used to do multi-variate testing';
14+
1215
function Demo(props: Props) {
1316
const [cssVariant, setCssVariant] = useState(null);
1417
function handleRunExperiment(experimentName, variantName) {
@@ -21,10 +24,16 @@ function Demo(props: Props) {
2124
return (
2225
<div className={styles.ab}>
2326
<Head>
24-
<title>A/B - Design System - Het Financieele Dagblad</title>
27+
<title>
28+
{metaTitle} - Design System - Het Financieele Dagblad
29+
</title>
30+
<meta name="description" content={metaDescription} />
31+
<meta property="og:title" content={metaTitle} />
32+
<meta property="og:description" content={metaDescription} />
33+
<meta property="twitter:title" content="FD Design System" />
2534
<meta
26-
name="description"
27-
content="A/B, used to do multi-variate testing"
35+
property="twitter:description"
36+
content={metaDescription}
2837
/>
2938
</Head>
3039

‎src/pages/accordion.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,10 @@ const items = [
153153
},
154154
];
155155

156+
const metaTitle = 'Accordion';
157+
const metaDescription =
158+
"Accordion, used to display an accordion for use in e.g. FAQ's";
159+
156160
function Page() {
157161
/**
158162
* Use article background.
@@ -169,11 +173,15 @@ function Page() {
169173
<>
170174
<Head>
171175
<title>
172-
Accordion - Design System - Het Financieele Dagblad
176+
{metaTitle} - Design System - Het Financieele Dagblad
173177
</title>
178+
<meta name="description" content={metaDescription} />
179+
<meta property="og:title" content={metaTitle} />
180+
<meta property="og:description" content={metaDescription} />
181+
<meta property="twitter:title" content="FD Design System" />
174182
<meta
175-
name="description"
176-
content="Accordion, used to display an accordion for use in e.g. FAQ's"
183+
property="twitter:description"
184+
content={metaDescription}
177185
/>
178186
</Head>
179187

‎src/pages/article-bullet-point.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ const initialProps = {
1717
],
1818
};
1919

20+
const metaTitle = 'Bullet point';
21+
const metaDescription = 'Bullet point, used in articles';
22+
2023
function Page() {
2124
/**
2225
* Use article background.
@@ -33,11 +36,15 @@ function Page() {
3336
<>
3437
<Head>
3538
<title>
36-
Bullet point - Design System - Het Financieele Dagblad
39+
{metaTitle} - Design System - Het Financieele Dagblad
3740
</title>
41+
<meta name="description" content={metaDescription} />
42+
<meta property="og:title" content={metaTitle} />
43+
<meta property="og:description" content={metaDescription} />
44+
<meta property="twitter:title" content="FD Design System" />
3845
<meta
39-
name="description"
40-
content="Bullet point, used in articles"
46+
property="twitter:description"
47+
content={metaDescription}
4148
/>
4249
</Head>
4350

‎src/pages/article-image.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ const initialProps = {
1313
fileName: '8de629dcb6211812af36b6824df2058f83deba9c.jpg',
1414
};
1515

16+
const metaTitle = 'Article image';
17+
const metaDescription =
18+
'Article image, used to display an inline image/photo in articles';
19+
1620
function Page() {
1721
/**
1822
* Use article background.
@@ -29,11 +33,15 @@ function Page() {
2933
<>
3034
<Head>
3135
<title>
32-
Article image - Design System - Het Financieele Dagblad
36+
{metaTitle} - Design System - Het Financieele Dagblad
3337
</title>
38+
<meta name="description" content={metaDescription} />
39+
<meta property="og:title" content={metaTitle} />
40+
<meta property="og:description" content={metaDescription} />
41+
<meta property="twitter:title" content="FD Design System" />
3442
<meta
35-
name="description"
36-
content="Article image, used to display an inline image/photo in articles"
43+
property="twitter:description"
44+
content={metaDescription}
3745
/>
3846
</Head>
3947

0 commit comments

Comments
 (0)