mp-design-system 1.2.26 → 1.2.27
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/build/js/app.js.map +1 -1
- package/dist/build/scss/library.css +1 -1
- package/dist/build/scss/library.css.map +1 -1
- package/dist/build/scss/main.css +1 -1
- package/dist/build/scss/main.css.map +1 -1
- package/package.json +1 -1
- package/src/_includes/components/card/macro.njk +4 -0
- package/src/_includes/components/card/search-result-card.config.js +29 -0
- package/src/_includes/components/card/search-result-card.njk +24 -0
- package/src/_includes/components/card/search-result-card.scss +48 -0
- package/src/_includes/components/eyebrow/eyebrow.config.js +47 -0
- package/src/_includes/components/eyebrow/eyebrow.njk +7 -0
- package/src/_includes/components/eyebrow/eyebrow.scss +29 -0
- package/src/_includes/components/eyebrow/macro.njk +5 -0
- package/src/_includes/components/usp/usp.config.js +5 -2
- package/src/_includes/components/usp/usp.md +82 -2
- package/src/_includes/components/usp/usp.njk +7 -1
- package/src/_includes/components/usp/usp.scss +2 -2
- package/src/assets/scss/components/index.scss +2 -0
- package/src/assets/scss/foundations/typography.scss +6 -6
- package/src/assets/scss/tools/index.scss +12 -0
- package/src/assets/scss/utilities/divider.scss +6 -0
- package/src/assets/scss/utilities/index.scss +1 -0
- package/src/patterns/usps.njk +34 -12
- package/src/assets/fonts/Inter-Bold.woff +0 -0
- package/src/assets/fonts/Inter-Bold.woff2 +0 -0
- package/src/assets/fonts/Inter-Regular.woff +0 -0
- package/src/assets/fonts/Inter-Regular.woff2 +0 -0
- package/src/assets/fonts/Inter-SemiBold.woff +0 -0
- package/src/assets/fonts/Inter-SemiBold.woff2 +0 -0
- /package/{dist/build/Inter-Bold.419e8c71.woff → src/assets/fonts/inter-bold.woff} +0 -0
- /package/{dist/build/Inter-Bold.af5441a3.woff2 → src/assets/fonts/inter-bold.woff2} +0 -0
- /package/{dist/build/Inter-Regular.ca6858d7.woff → src/assets/fonts/inter-regular.woff} +0 -0
- /package/{dist/build/Inter-Regular.ed77b881.woff2 → src/assets/fonts/inter-regular.woff2} +0 -0
- /package/{dist/build/Inter-SemiBold.cc1168df.woff → src/assets/fonts/inter-semibold.woff} +0 -0
- /package/{dist/build/Inter-SemiBold.dd034768.woff2 → src/assets/fonts/inter-semibold.woff2} +0 -0
package/package.json
CHANGED
@@ -10,4 +10,8 @@
|
|
10
10
|
|
11
11
|
{% macro productComparisonCard(params) %}
|
12
12
|
{{ c({ name: 'product-comparison-card', folder: 'card' }, params) }}
|
13
|
+
{% endmacro %}
|
14
|
+
|
15
|
+
{% macro searchResultCard(params) %}
|
16
|
+
{{ c({ name: 'search-result-card', folder: 'card' }, params) }}
|
13
17
|
{% endmacro %}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
const categories = require('../component/categories');
|
2
|
+
|
3
|
+
module.exports = {
|
4
|
+
title: 'Search result card',
|
5
|
+
category: categories.card,
|
6
|
+
component: {
|
7
|
+
name: 'search-result-card',
|
8
|
+
folder: 'card'
|
9
|
+
},
|
10
|
+
preview: 'content-width',
|
11
|
+
context: {
|
12
|
+
title: 'Mastersizer range',
|
13
|
+
description: 'The Mastersizer range of laser diffraction particle size analyzers set the standard for delivering rapid, accurate particle size distributions for both wet and dry dispersions.',
|
14
|
+
url: '/en/products/product-range/mastersizer-range',
|
15
|
+
tag: 'Product range'
|
16
|
+
},
|
17
|
+
variants: [
|
18
|
+
],
|
19
|
+
props: [
|
20
|
+
{
|
21
|
+
table: [
|
22
|
+
['title', 'string'],
|
23
|
+
['description', 'string'],
|
24
|
+
['url', 'string'],
|
25
|
+
['tag', 'string'],
|
26
|
+
]
|
27
|
+
}
|
28
|
+
]
|
29
|
+
}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
{%- from "components/eyebrow/macro.njk" import eyebrow -%}
|
2
|
+
|
3
|
+
|
4
|
+
<article class="mp c-search-result-card">
|
5
|
+
<header class="c-search-result-card__header">
|
6
|
+
<h2 class="c-search-result-card__title">
|
7
|
+
<a href="{{ params.url }}">
|
8
|
+
{{ params.title }}
|
9
|
+
</a>
|
10
|
+
</h2>
|
11
|
+
{% if params.tag | length %}
|
12
|
+
<div class="c-search-result-card__tag">
|
13
|
+
{{ eyebrow({
|
14
|
+
text: params.tag,
|
15
|
+
colour: 'blue'
|
16
|
+
}) }}
|
17
|
+
</div>
|
18
|
+
{% endif %}
|
19
|
+
</header>
|
20
|
+
<div class="c-search-result-card__body">
|
21
|
+
<p class="c-search-result-card__description">{{ params.description }}</p>
|
22
|
+
<span class="c-search-result-card__url">{{ params.url }}</span>
|
23
|
+
</div>
|
24
|
+
</article>
|
@@ -0,0 +1,48 @@
|
|
1
|
+
.c-search-result-card {
|
2
|
+
@extend .u-flow--xs;
|
3
|
+
@include padding-top('m');
|
4
|
+
@include padding-bottom('m');
|
5
|
+
position: relative;
|
6
|
+
|
7
|
+
&:focus-within {
|
8
|
+
outline: 2px solid color('petrol');
|
9
|
+
}
|
10
|
+
|
11
|
+
&:where(:hover, :focus-within) .c-search-result-card__title {
|
12
|
+
text-decoration: underline;
|
13
|
+
text-underline-offset: 0.1em;
|
14
|
+
}
|
15
|
+
|
16
|
+
&__header,
|
17
|
+
&__body {
|
18
|
+
display: flex;
|
19
|
+
flex-direction: column;
|
20
|
+
}
|
21
|
+
|
22
|
+
&__title {
|
23
|
+
@include step(1);
|
24
|
+
|
25
|
+
a {
|
26
|
+
@include clickable-parent;
|
27
|
+
|
28
|
+
&:focus {
|
29
|
+
outline: 0;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
&__tag,
|
35
|
+
&__description + &__url {
|
36
|
+
@include margin-bottom('2xs');
|
37
|
+
order: -1;
|
38
|
+
}
|
39
|
+
|
40
|
+
&__body {
|
41
|
+
@extend .o-prose;
|
42
|
+
@include step(-1);
|
43
|
+
}
|
44
|
+
|
45
|
+
&__url {
|
46
|
+
color: color('utility-blue');
|
47
|
+
}
|
48
|
+
}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
module.exports = {
|
2
|
+
title: 'Eyebrow',
|
3
|
+
component: {
|
4
|
+
name: 'eyebrow',
|
5
|
+
},
|
6
|
+
context: {
|
7
|
+
text: 'Product range',
|
8
|
+
colour: ''
|
9
|
+
},
|
10
|
+
variants: [
|
11
|
+
{
|
12
|
+
title: 'Blue',
|
13
|
+
context: {
|
14
|
+
text: 'Product range',
|
15
|
+
colour: 'blue'
|
16
|
+
}
|
17
|
+
},
|
18
|
+
{
|
19
|
+
title: 'Petrol',
|
20
|
+
context: {
|
21
|
+
text: 'Product range',
|
22
|
+
colour: 'petrol'
|
23
|
+
}
|
24
|
+
},
|
25
|
+
{
|
26
|
+
title: 'Red',
|
27
|
+
context: {
|
28
|
+
text: 'Product range',
|
29
|
+
colour: 'red'
|
30
|
+
}
|
31
|
+
},
|
32
|
+
{
|
33
|
+
title: 'Utility blue',
|
34
|
+
context: {
|
35
|
+
text: 'Product range',
|
36
|
+
colour: 'utility-blue'
|
37
|
+
}
|
38
|
+
},
|
39
|
+
{
|
40
|
+
title: 'Utility orange',
|
41
|
+
context: {
|
42
|
+
text: 'Product range',
|
43
|
+
colour: 'utility-orange'
|
44
|
+
}
|
45
|
+
}
|
46
|
+
]
|
47
|
+
}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
.c-eyebrow {
|
2
|
+
background-color: color('green');
|
3
|
+
color: color('white');
|
4
|
+
@include padding('3xs', 'xs');
|
5
|
+
border-radius: 2em;
|
6
|
+
display: inline-block;
|
7
|
+
@include step(-1);
|
8
|
+
letter-spacing: -.01em;
|
9
|
+
|
10
|
+
&--blue {
|
11
|
+
background-color: color('blue');
|
12
|
+
}
|
13
|
+
|
14
|
+
&--petrol {
|
15
|
+
background-color: color('petrol');
|
16
|
+
}
|
17
|
+
|
18
|
+
&--red {
|
19
|
+
background-color: color('red');
|
20
|
+
}
|
21
|
+
|
22
|
+
&--utility-blue {
|
23
|
+
background-color: color('utility-blue');
|
24
|
+
}
|
25
|
+
|
26
|
+
&--utility-orange {
|
27
|
+
background-color: color('utility-orange');
|
28
|
+
}
|
29
|
+
}
|
@@ -22,7 +22,9 @@ module.exports = {
|
|
22
22
|
context: {
|
23
23
|
classes: 'c-usp c-usp--center',
|
24
24
|
content: false,
|
25
|
-
icon:
|
25
|
+
icon: {
|
26
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/7da9e7e5-edca-4d49-bc7f-b11401123c52/icon-stopwatch_Original%20file.svg'
|
27
|
+
}
|
26
28
|
}
|
27
29
|
},
|
28
30
|
{
|
@@ -45,7 +47,8 @@ module.exports = {
|
|
45
47
|
['content', 'html', 'HTML passed to the prose field'],
|
46
48
|
['link', 'string (deprecated)'],
|
47
49
|
['eyebrow', 'string'],
|
48
|
-
['icon', 'svg', 'HTML/SVG which is output raw']
|
50
|
+
['icon.svg', 'svg', 'HTML/SVG which is output raw'],
|
51
|
+
['icon.url', 'string', 'image url']
|
49
52
|
]
|
50
53
|
}
|
51
54
|
]
|
@@ -1,3 +1,81 @@
|
|
1
|
+
# Blank HTML templates
|
2
|
+
|
3
|
+
{% accordion %}
|
4
|
+
|
5
|
+
{% accordionItem "Grid of four, icon & text, left-aligned" %}
|
6
|
+
|
7
|
+
```html
|
8
|
+
<div class="o-grid o-grid--of-four">
|
9
|
+
|
10
|
+
<!-- First USP block: duplicate this -->
|
11
|
+
<div class="mp c-usp">
|
12
|
+
<div class="u-flow">
|
13
|
+
<div class="c-usp__icon">
|
14
|
+
<img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
|
15
|
+
</div>
|
16
|
+
<h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
|
17
|
+
<div class="mp o-prose u-step--1">
|
18
|
+
<p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>
|
19
|
+
</div>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
|
23
|
+
<!-- etc. -->
|
24
|
+
|
25
|
+
</div>
|
26
|
+
```
|
27
|
+
|
28
|
+
{% endaccordionItem %}
|
29
|
+
|
30
|
+
{% accordionItem "Grid of three, eyebrow & text, left-aligned" %}
|
31
|
+
|
32
|
+
```html
|
33
|
+
<div class="o-grid o-grid--of-three">
|
34
|
+
|
35
|
+
<!-- First USP block: duplicate this -->
|
36
|
+
<div class="mp c-usp">
|
37
|
+
<div class="u-flow ">
|
38
|
+
<span class="c-usp__eyebrow">Greater flexibility</span>
|
39
|
+
<h3 class="c-h c-h--step-2 c-usp__title">Impressive particle sizing performance</h3>
|
40
|
+
<div class="mp o-prose u-step--1">
|
41
|
+
<p>High sample throughput and a measurement size range from 10nm to 3.5mm</p>
|
42
|
+
</div>
|
43
|
+
</div>
|
44
|
+
</div>
|
45
|
+
|
46
|
+
<!-- etc. -->
|
47
|
+
|
48
|
+
</div>
|
49
|
+
```
|
50
|
+
|
51
|
+
{% endaccordionItem %}
|
52
|
+
|
53
|
+
{% accordionItem "Grid of seven (or more), icons only, centered" %}
|
54
|
+
|
55
|
+
```html
|
56
|
+
<div class="o-grid o-grid--of-three u-justify-center">
|
57
|
+
|
58
|
+
<!-- First USP block: duplicate this -->
|
59
|
+
<div class="mp c-usp c-usp c-usp--center">
|
60
|
+
<div class="u-flow u-text-center">
|
61
|
+
<div class="c-usp__icon">
|
62
|
+
<img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
|
63
|
+
</div>
|
64
|
+
<h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
|
65
|
+
</div>
|
66
|
+
</div>
|
67
|
+
|
68
|
+
<!-- etc. -->
|
69
|
+
|
70
|
+
</div>
|
71
|
+
```
|
72
|
+
|
73
|
+
{% endaccordionItem %}
|
74
|
+
|
75
|
+
{% endaccordion %}
|
76
|
+
|
77
|
+
---
|
78
|
+
|
1
79
|
A USP can include a few elements:
|
2
80
|
- Icon (optional)
|
3
81
|
- Eyebrow (optional)
|
@@ -17,5 +95,7 @@ When using USPs, please follow these guidelines:
|
|
17
95
|
- If there's no body text or eyebrow, the USP may be centered
|
18
96
|
- **Font size**
|
19
97
|
- Body text font size is always step -1
|
20
|
-
- Title text is step
|
21
|
-
- or step
|
98
|
+
- Title text is step 2 when using a three-column grid
|
99
|
+
- or step 1 when using a four-column grid
|
100
|
+
|
101
|
+
---
|
@@ -21,7 +21,13 @@
|
|
21
21
|
</span>
|
22
22
|
{% endif %}
|
23
23
|
{% if params.icon %}
|
24
|
-
<div class="c-usp__icon">
|
24
|
+
<div class="c-usp__icon">
|
25
|
+
{% if params.icon.svg %}
|
26
|
+
{{params.icon.svg | safe}}
|
27
|
+
{% elseif params.icon.url %}
|
28
|
+
<img src="{{params.icon.url}}"/>
|
29
|
+
{% endif %}
|
30
|
+
</div>
|
25
31
|
{% endif %}
|
26
32
|
<h3 class="c-h {{size}} c-usp__title">{{ params.title }}</h3>
|
27
33
|
{% if params.content %}
|
@@ -6,8 +6,10 @@
|
|
6
6
|
@import '~comp/card/card.scss';
|
7
7
|
@import '~comp/card/industry-card.scss';
|
8
8
|
@import '~comp/card/product-comparison-card.scss';
|
9
|
+
@import '~comp/card/search-result-card.scss';
|
9
10
|
@import '~comp/comparison-table/comparison-table.scss';
|
10
11
|
@import '~comp/embed/embed.scss';
|
12
|
+
@import '~comp/eyebrow/eyebrow.scss';
|
11
13
|
@import '~comp/featured-article-card/featured-article-card.scss';
|
12
14
|
@import '~comp/features-table/features-table.scss';
|
13
15
|
@import '~comp/filter-search/filter-search.scss';
|
@@ -136,8 +136,8 @@ $f-max-width: 1332;
|
|
136
136
|
font-style: normal;
|
137
137
|
font-weight: 400;
|
138
138
|
font-display: swap;
|
139
|
-
src:
|
140
|
-
|
139
|
+
src: #{'../fonts/inter-regular.woff2'} format("woff2"),
|
140
|
+
#{'../fonts/inter-regular.woff'} format("woff");
|
141
141
|
}
|
142
142
|
|
143
143
|
@font-face {
|
@@ -145,8 +145,8 @@ $f-max-width: 1332;
|
|
145
145
|
font-style: normal;
|
146
146
|
font-weight: 600;
|
147
147
|
font-display: swap;
|
148
|
-
src:
|
149
|
-
|
148
|
+
src: #{'../fonts/inter-semibold.woff2'} format("woff2"),
|
149
|
+
#{'../fonts/inter-semibold.woff'} format("woff");
|
150
150
|
}
|
151
151
|
|
152
152
|
@font-face {
|
@@ -154,6 +154,6 @@ $f-max-width: 1332;
|
|
154
154
|
font-style: normal;
|
155
155
|
font-weight: 700;
|
156
156
|
font-display: swap;
|
157
|
-
src:
|
158
|
-
|
157
|
+
src: #{'../fonts/inter-bold.woff2'} format("woff2"),
|
158
|
+
#{'../fonts/inter-bold.woff'} format("woff");
|
159
159
|
}
|
package/src/patterns/usps.njk
CHANGED
@@ -54,25 +54,33 @@ tags: 'patterns'
|
|
54
54
|
title: "Handles the toughest conditions",
|
55
55
|
content: "<p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>",
|
56
56
|
size: "c-h--step-1",
|
57
|
-
icon:
|
57
|
+
icon: {
|
58
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/9448808a-1a92-4eef-a49b-b11401122d59/icon-forj_Original%20file.svg'
|
59
|
+
}
|
58
60
|
}) }}
|
59
61
|
{{ usp({
|
60
62
|
title: "Results you can count on",
|
61
63
|
content: "<p>Consistent heating between positions, homogeneous melt, and contamination-free heating - ensuring superior, repeatable results.</p>",
|
62
64
|
size: "c-h--step-1",
|
63
|
-
icon:
|
65
|
+
icon: {
|
66
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/5d376f9f-9dbf-4d00-94b0-b11401122887/icon-clipboard_Original%20file.svg'
|
67
|
+
}
|
64
68
|
}) }}
|
65
69
|
{{ usp({
|
66
70
|
title: "World-leading speed",
|
67
71
|
content: "<p>The fastest fusion sample-prep on the market. Boost your productivity by up to 25% with the same compact footprint.</p>",
|
68
72
|
size: "c-h--step-1",
|
69
|
-
icon:
|
73
|
+
icon: {
|
74
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/7da9e7e5-edca-4d49-bc7f-b11401123c52/icon-stopwatch_Original%20file.svg'
|
75
|
+
}
|
70
76
|
}) }}
|
71
77
|
{{ usp({
|
72
78
|
title: "Hassle-free handling",
|
73
79
|
content: "<p>Suitable for full-lab integration, FORJ is easy to install and provides a safe and user-friendly interface, so you can quickly get up and running.</p>",
|
74
80
|
size: "c-h--step-1",
|
75
|
-
icon:
|
81
|
+
icon: {
|
82
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/f900b665-8a81-47a5-8d59-b114011227bf/icon-click-fingers_Original%20file.svg'
|
83
|
+
}
|
76
84
|
}) }}
|
77
85
|
</div>
|
78
86
|
</div>
|
@@ -80,46 +88,60 @@ tags: 'patterns'
|
|
80
88
|
<div class="u-flow--s">
|
81
89
|
<div class="o-grid o-grid--of-four u-justify-center">
|
82
90
|
{{ usp({
|
83
|
-
title: "
|
91
|
+
title: "Reduced emissions",
|
84
92
|
classes: 'c-usp c-usp--center',
|
85
93
|
size: "c-h--step-1",
|
86
|
-
icon:
|
94
|
+
icon: {
|
95
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/6bf3f0b2-57ec-4e3e-a32c-b11401123933/icon-plant_Original%20file.svg'
|
96
|
+
}
|
87
97
|
}) }}
|
88
98
|
{{ usp({
|
89
99
|
title: "Compliance standards",
|
90
100
|
classes: 'c-usp c-usp--center',
|
91
101
|
size: "c-h--step-1",
|
92
|
-
icon:
|
102
|
+
icon: {
|
103
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/63b61c71-51e2-4ee6-b79e-b11401122bf5/icon-file-with-shield_Original%20file.svg'
|
104
|
+
}
|
93
105
|
}) }}
|
94
106
|
{{ usp({
|
95
107
|
title: "Instant monitoring",
|
96
108
|
classes: 'c-usp c-usp--center',
|
97
109
|
size: "c-h--step-1",
|
98
|
-
icon:
|
110
|
+
icon: {
|
111
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/198f871d-12a4-4523-8303-b114011237bf/icon-monitor-graph_Original%20file.svg'
|
112
|
+
}
|
99
113
|
}) }}
|
100
114
|
{{ usp({
|
101
115
|
title: "Peerless quality control",
|
102
116
|
classes: 'c-usp c-usp--center',
|
103
117
|
size: "c-h--step-1",
|
104
|
-
icon:
|
118
|
+
icon: {
|
119
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/c868ad42-c6d4-49e4-b4f4-b11401122492/icon-award_Original%20file.svg'
|
120
|
+
}
|
105
121
|
}) }}
|
106
122
|
{{ usp({
|
107
123
|
title: "Expert support on hand",
|
108
124
|
classes: 'c-usp c-usp--center',
|
109
125
|
size: "c-h--step-1",
|
110
|
-
icon:
|
126
|
+
icon: {
|
127
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/00a7cc05-1143-4d0b-bbc3-b11401123855/icon-phone-with-wrench_Original%20file.svg'
|
128
|
+
}
|
111
129
|
}) }}
|
112
130
|
{{ usp({
|
113
131
|
title: "Industry-leading solutions",
|
114
132
|
classes: 'c-usp c-usp--center',
|
115
133
|
size: "c-h--step-1",
|
116
|
-
icon:
|
134
|
+
icon: {
|
135
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/1b30c30f-9e0a-4a23-a512-b11401122a8f/icon-compass_Original%20file.svg'
|
136
|
+
}
|
117
137
|
}) }}
|
118
138
|
{{ usp({
|
119
139
|
title: "Training and consultancy",
|
120
140
|
classes: 'c-usp c-usp--center',
|
121
141
|
size: "c-h--step-1",
|
122
|
-
icon:
|
142
|
+
icon: {
|
143
|
+
url: 'https://p3.aprimocdn.net/malvernpanalytical/df7e8b27-8e8f-494d-8a03-b11401122ff0/icon-graduation-cap_Original%20file.svg'
|
144
|
+
}
|
123
145
|
}) }}
|
124
146
|
</div>
|
125
147
|
</div>
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|