mp-design-system 0.9.8 → 0.9.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/build/scss/library.css +1 -1
  2. package/dist/build/scss/library.css.map +1 -1
  3. package/dist/build/scss/main.css +1 -1
  4. package/dist/build/scss/main.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/_includes/components/accordion/macro.njk +1 -1
  7. package/src/_includes/components/features-table/features-table.config.js +16 -0
  8. package/src/_includes/components/features-table/features-table.njk +360 -0
  9. package/src/_includes/components/features-table/features-table.scss +101 -0
  10. package/src/_includes/components/features-table/macro.njk +5 -0
  11. package/src/_includes/components/footer/footer.scss +2 -2
  12. package/src/_includes/components/header/header.scss +15 -1
  13. package/src/_includes/components/table/table.scss +13 -0
  14. package/src/_includes/library-navigation/brand-nav.njk +2 -1
  15. package/src/_includes/navigation/corporate.njk +5 -2
  16. package/src/assets/scss/components/index.scss +1 -0
  17. package/src/assets/scss/components/lightbox.scss +1 -0
  18. package/src/assets/scss/library.scss +15 -2
  19. package/src/assets/scss/objects/grid.scss +46 -91
  20. package/src/assets/scss/objects/prose.scss +2 -1
  21. package/src/assets/scss/utilities/space.scss +12 -0
  22. package/src/assets/scss/utilities/typography.scss +4 -0
  23. package/src/brand/colors.njk +15 -6
  24. package/src/brand/illustration.md +44 -0
  25. package/src/brand/images.md +1 -1
  26. package/src/components/grid/generic.njk +31 -0
  27. package/src/components/grid/index.njk +21 -2
  28. package/src/components/grid/layout.njk +5 -5
  29. package/src/prototype/sections.njk +290 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mp-design-system",
3
- "version": "0.9.8",
3
+ "version": "0.9.16",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "dev": "npm-run-all --parallel bundle:*",
@@ -1,5 +1,5 @@
1
1
  {% from "components/component/component.njk" import c %}
2
2
 
3
- {% macro alert(params) %}
3
+ {% macro accordion(params) %}
4
4
  {{ c({ name: 'accordion' }, params) }}
5
5
  {% endmacro %}
@@ -0,0 +1,16 @@
1
+ const products = [
2
+ ]
3
+
4
+ module.exports = {
5
+ title: 'Features table',
6
+ component: {
7
+ name: 'features-table',
8
+ },
9
+ context: {
10
+ sections: [
11
+ ],
12
+ products: [
13
+ ...products
14
+ ]
15
+ }
16
+ }
@@ -0,0 +1,360 @@
1
+ {% from "components/button/macro.njk" import button %}
2
+ {% from "components/icon/macro.njk" import icon %}
3
+
4
+ <div id="product-features-table" class="mp c-features u-pad-bottom-l">
5
+ <div class="c-features__mobile">
6
+ <div class="mp c-tabs c-tabs--anchor">
7
+ <nav class="c-tabs__controls">
8
+ <ul class="c-tabs__controls-list">
9
+ <li><a class="c-tabs__control c-tabs__control--active" href="#tab-1">Mastersizer 3000</a></li>
10
+ <li><a class="c-tabs__control" href="#tab-2">Mastersizer 3000E</a></li>
11
+ <li><a class="c-tabs__control" href="#tab-3">Mastersizer 3000E</a></li>
12
+ </ul>
13
+ </nav>
14
+ <div class="c-tabs__content">
15
+ <div id="tab-1" class="c-tab c-tab--active">
16
+ <table class="c-table c-table--features">
17
+ <thead>
18
+ <tr>
19
+ <th class="c-features__product u-flow--prose">
20
+ <img alt="Mastersizer 3000" src="/static/img/range-product-1.jpg" />
21
+ <h3 class="c-h c-h--step-0">Mastersizer 3000</h3>
22
+ </th>
23
+ </tr>
24
+ </thead>
25
+ <tbody>
26
+ <tr class="c-features__introduction">
27
+ <td>Advanced features</td>
28
+ </tr>
29
+ <tr class="c-features__label-text">
30
+ <td>
31
+ <span class="u-strong">0.01µm to 3500µm</span>
32
+ <span>Extended particle size range</span>
33
+ </td>
34
+ </tr>
35
+ <tr class="c-features__checklist-title">
36
+ <th>Compatible sample dispersions</th>
37
+ </tr>
38
+ <tr class="c-features__checklist">
39
+ <td>
40
+ {{ icon({ id: 'tick' }) }}Automated wet
41
+ </td>
42
+ </tr>
43
+ <tr class="c-features__checklist">
44
+ <td>
45
+ {{ icon({ id: 'tick' }) }}Automated dry powder
46
+ </td>
47
+ </tr>
48
+ <tr class="c-features__checklist">
49
+ <td>
50
+ {{ icon({ id: 'tick' }) }}Manual wet
51
+ </td>
52
+ </tr>
53
+ <tr class="c-features__checklist c-features__checklist--last">
54
+ <td class="u-grey-step-1">
55
+ {{ icon({ id: 'cross' }) }}Manual dry powder
56
+ </td>
57
+ </tr>
58
+ <tr class="c-features__text">
59
+ <td>
60
+ Advanced method development and comparison software
61
+ </td>
62
+ </tr>
63
+ <tr class="c-features__text">
64
+ <td>
65
+ Advanced data quality assessment and reporting software
66
+ </td>
67
+ </tr>
68
+ <tr class="c-features__text">
69
+ <td>
70
+ IQ/OQ validation
71
+ </td>
72
+ </tr>
73
+ <tr class="c-features__text">
74
+ <td>
75
+ 21 CFR Part 11 support
76
+ </td>
77
+ </tr>
78
+ </tbody>
79
+ <tfoot>
80
+ <tr>
81
+ <td>
82
+ <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
83
+ </td>
84
+ </tr>
85
+ </tfoot>
86
+ </table>
87
+ </div>
88
+ <div id="tab-2" class="c-tab">
89
+ <table class="c-table c-table--features">
90
+ <thead>
91
+ <tr>
92
+ <th class="c-features__product u-flow--prose">
93
+ <img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
94
+ <h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
95
+ <span>with Extended software</span>
96
+ </th>
97
+ </tr>
98
+ </thead>
99
+ <tbody>
100
+ <tr class="c-features__introduction">
101
+ <td>Flexible features</td>
102
+ </tr>
103
+ <tr class="c-features__label-text">
104
+ <td>
105
+ <span class="u-strong">0.1µm to 1000µm</span>
106
+ <span>Standard particle size range</span>
107
+ </td>
108
+ </tr>
109
+ <tr class="c-features__checklist-title">
110
+ <th>Compatible sample dispersions</th>
111
+ </tr>
112
+ <tr class="c-features__checklist">
113
+ <td>
114
+ {{ icon({ id: 'tick' }) }}Automated wet
115
+ </td>
116
+ </tr>
117
+ <tr class="c-features__checklist">
118
+ <td class="u-grey-step-1">
119
+ {{ icon({ id: 'cross' }) }}Automated dry powder
120
+ </td>
121
+ </tr>
122
+ <tr class="c-features__checklist">
123
+ <td>
124
+ {{ icon({ id: 'tick' }) }}Manual wet
125
+ </td>
126
+ </tr>
127
+ <tr class="c-features__checklist c-features__checklist--last">
128
+ <td>
129
+ {{ icon({ id: 'tick' }) }}Manual dry powder
130
+ </td>
131
+ </tr>
132
+ <tr class="c-features__text">
133
+ <td>
134
+ Advanced method development and comparison software
135
+ </td>
136
+ </tr>
137
+ <tr class="c-features__text">
138
+ <td>
139
+ Advanced data quality assessment and reporting software
140
+ </td>
141
+ </tr>
142
+ </tbody>
143
+ <tfoot>
144
+ <tr>
145
+ <td>
146
+ <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
147
+ </td>
148
+ </tr>
149
+ </tfoot>
150
+ </table>
151
+ </div>
152
+ <div id="tab-3" class="c-tab">
153
+ <table class="c-table c-table--features">
154
+ <thead>
155
+ <tr>
156
+ <th class="c-features__product u-flow--prose">
157
+ <img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
158
+ <h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
159
+ <span>with Basic software</span>
160
+ </th>
161
+ </tr>
162
+ </thead>
163
+ <tbody>
164
+ <tr class="c-features__introduction">
165
+ <td>Entry-level features</td>
166
+ </tr>
167
+ <tr class="c-features__label-text">
168
+ <td>
169
+ <span class="u-strong">0.1µm to 1000µm</span>
170
+ <span>Standard particle size range</span>
171
+ </td>
172
+ </tr>
173
+ <tr class="c-features__checklist-title">
174
+ <th>Compatible sample dispersions</th>
175
+ </tr>
176
+ <tr class="c-features__checklist">
177
+ <td class="u-grey-step-1">
178
+ {{ icon({ id: 'cross' }) }}Automated wet
179
+ </td>
180
+ </tr>
181
+ <tr class="c-features__checklist">
182
+ <td class="u-grey-step-1">
183
+ {{ icon({ id: 'cross' }) }}Automated dry powder
184
+ </td>
185
+ </tr>
186
+ <tr class="c-features__checklist">
187
+ <td>
188
+ {{ icon({ id: 'tick' }) }} Manual wet
189
+ </td>
190
+ </tr>
191
+ <tr class="c-features__checklist c-features__checklist--last">
192
+ <td>
193
+ {{ icon({ id: 'tick' }) }} Manual dry powder
194
+ </td>
195
+ </tr>
196
+ </tbody>
197
+ <tfoot>
198
+ <tr>
199
+ <td>
200
+ <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
201
+ </td>
202
+ </tr>
203
+ </tfoot>
204
+ </table>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <div class="c-features__wrapper">
210
+ <table class="c-table c-table--features">
211
+ <thead>
212
+ <tr>
213
+ <th class="c-features__product u-flow--prose">
214
+ <img alt="Mastersizer 3000" src="/static/img/range-product-1.jpg" />
215
+ <h3 class="c-h c-h--step-0">Mastersizer 3000</h3>
216
+ </th>
217
+ <th class="c-features__product u-flow--prose">
218
+ <img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
219
+ <h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
220
+ <span>with Extended software</span>
221
+ </th>
222
+ <th class="c-features__product u-flow--prose">
223
+ <img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
224
+ <h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
225
+ <span>with Basic software</span>
226
+ </th>
227
+ </tr>
228
+ </thead>
229
+ <tbody>
230
+ <tr class="c-features__introduction">
231
+ <td>
232
+ Advanced features
233
+ </td>
234
+ <td>
235
+ Flexible features
236
+ </td>
237
+ <td>
238
+ Entry-level features
239
+ </td>
240
+ </tr>
241
+ <tr class="c-features__label-text">
242
+ <td>
243
+ <span class="u-strong">0.01µm to 3500µm</span>
244
+ <span>Extended particle size range</span>
245
+ </td>
246
+ <td>
247
+ <span class="u-strong">0.1µm to 1000µm</span>
248
+ <span>Standard particle size range</span>
249
+ </td>
250
+ <td>
251
+ <span class="u-strong">0.1µm to 1000µm</span>
252
+ <span>Standard particle size range</span>
253
+ </td>
254
+ </tr>
255
+ <tr class="c-features__checklist-title">
256
+ <th>Compatible sample dispersions</th>
257
+ <th>Compatible sample dispersions</th>
258
+ <th>Compatible sample dispersions</th>
259
+ </tr>
260
+ <tr class="c-features__checklist">
261
+ <td>
262
+ {{ icon({ id: 'tick' }) }} Automated wet
263
+ </td>
264
+ <td>
265
+ {{ icon({ id: 'tick' }) }} Automated wet
266
+ </td>
267
+ <td class="u-grey-step-1">
268
+ {{ icon({ id: 'cross' }) }} Automated wet
269
+ </td>
270
+ </tr>
271
+ <tr class="c-features__checklist">
272
+ <td>
273
+ {{ icon({ id: 'tick' }) }} Automated dry powder
274
+ </td>
275
+ <td class="u-grey-step-1">
276
+ {{ icon({ id: 'cross' }) }} Automated dry powder
277
+ </td>
278
+ <td class="u-grey-step-1">
279
+ {{ icon({ id: 'cross' }) }} Automated dry powder
280
+ </td>
281
+ </tr>
282
+ <tr class="c-features__checklist">
283
+ <td>
284
+ {{ icon({ id: 'tick' }) }} Manual wet
285
+ </td>
286
+ <td>
287
+ {{ icon({ id: 'tick' }) }} Manual wet
288
+ </td>
289
+ <td>
290
+ {{ icon({ id: 'tick' }) }} Manual wet
291
+ </td>
292
+ </tr>
293
+ <tr class="c-features__checklist c-features__checklist--last">
294
+ <td class="u-grey-step-1">
295
+ {{ icon({ id: 'cross' }) }} Manual dry powder
296
+ </td>
297
+ <td>
298
+ {{ icon({ id: 'tick' }) }} Manual dry powder
299
+ </td>
300
+ <td>
301
+ {{ icon({ id: 'tick' }) }} <span>Manual dry powder</span>
302
+ </td>
303
+ </tr>
304
+ <tr class="c-features__text">
305
+ <td>
306
+ Advanced method development and comparison software
307
+ </td>
308
+ <td>
309
+ Advanced method development and comparison software
310
+ </td>
311
+ <td>
312
+ -
313
+ </td>
314
+ </tr>
315
+ <tr class="c-features__text">
316
+ <td>
317
+ Advanced data quality assessment and reporting software
318
+ </td>
319
+ <td>
320
+ Advanced data quality assessment and reporting software
321
+ </td>
322
+ <td>
323
+ -
324
+ </td>
325
+ </tr>
326
+ <tr class="c-features__text">
327
+ <td>
328
+ IQ/OQ validation
329
+ </td>
330
+ <td>
331
+ -
332
+ </td>
333
+ <td>
334
+ -
335
+ </td>
336
+ </tr>
337
+ <tr class="c-features__text">
338
+ <td>
339
+ 21 CFR Part 11 support
340
+ </td>
341
+ <td>
342
+ -
343
+ </td>
344
+ <td>
345
+ -
346
+ </td>
347
+ </tr>
348
+ </tbody>
349
+ <tfoot>
350
+ <tr>
351
+ {% for product in params.products %}
352
+ <td>
353
+ {{ button({ label: 'Request a quote', type: 'span', inline: true }) }}
354
+ </td>
355
+ {% endfor %}
356
+ </tr>
357
+ </tfoot>
358
+ </table>
359
+ </div>
360
+ </div>
@@ -0,0 +1,101 @@
1
+ .c-features {
2
+ max-width: $wrapper;
3
+ @include step(-1);
4
+
5
+ &__wrapper {
6
+ overflow: auto;
7
+ width: 100%;
8
+ }
9
+
10
+ &__wrapper .c-table {
11
+ width: 100%;
12
+ table-layout: fixed;
13
+
14
+ @media (min-width: 60em) {
15
+ min-width: $wrapper;
16
+ }
17
+ }
18
+
19
+ &__title {
20
+ @include step();
21
+ }
22
+
23
+ &__product {
24
+ padding-bottom: 0 !important;
25
+ }
26
+
27
+ &__introduction td {
28
+ color: color('green');
29
+ font-weight: weight('bold');
30
+ @include padding-top('2xs');
31
+ }
32
+
33
+ &__label-text td {
34
+ @include flow('3xs');
35
+
36
+ span {
37
+ display: block;
38
+ }
39
+ }
40
+
41
+ &__checklist-title th {
42
+ color: inherit;
43
+ background: transparent !important;
44
+ padding-bottom: 0 !important;
45
+ }
46
+
47
+ tr.c-features__checklist:nth-last-child {
48
+ background: red;
49
+ @include padding-bottom('m');
50
+ }
51
+
52
+ &__checklist {
53
+ td {
54
+ @include padding-top('3xs');
55
+ padding-bottom: 0;
56
+ vertical-align: middle;
57
+ line-height: 20px;
58
+
59
+ svg {
60
+ height: 16px;
61
+ width: 16px;
62
+ vertical-align: middle;
63
+ display: inline-block;
64
+ margin-bottom: 2px;
65
+ }
66
+ }
67
+
68
+ &--last {
69
+ td {
70
+ @include padding-bottom('m');
71
+ }
72
+ }
73
+ }
74
+
75
+ &__mobile {
76
+ display: none;
77
+
78
+ & > * + * {
79
+ @include margin-top('m-l');
80
+ }
81
+
82
+ .c-table {
83
+ table-layout: fixed;
84
+ }
85
+ }
86
+
87
+ @media (max-width: 40em) {
88
+ &__mobile {
89
+ display: block;
90
+ }
91
+
92
+ &__wrapper {
93
+ display: none;
94
+ }
95
+ }
96
+
97
+ thead img {
98
+ @include space('max-height', '3xl');
99
+ object-fit: contain;
100
+ }
101
+ }
@@ -0,0 +1,5 @@
1
+ {% from "components/component/component.njk" import c %}
2
+
3
+ {% macro featuresTable(params) %}
4
+ {{ c({ name: 'features-table' }, params) }}
5
+ {% endmacro %}
@@ -118,6 +118,6 @@
118
118
  }
119
119
 
120
120
  // Temporary fix until RichTextRegion is fixed
121
- .rich-text-region + .c-footer {
122
- @include margin-top('l-xl');
121
+ .rich-text-region:has( + .c-footer ) {
122
+ @include margin-bottom('l-xl');
123
123
  }
@@ -183,7 +183,12 @@
183
183
  width: 100%;
184
184
 
185
185
  &:after {
186
- background: linear-gradient(270deg, color('green') -12.4%, color('blue') 11.22%, color('petrol') 43.74%, color('petrol') 70%, color('petrol', 'step--1') 100%);
186
+ background: linear-gradient(270deg,
187
+ color('green') -12%,
188
+ color('blue') 11%,
189
+ color('petrol') 43%,
190
+ color('petrol') 70%,
191
+ color('petrol', 'step--1') 100%);
187
192
  content: '';
188
193
  position: absolute;
189
194
  width: 100vw;
@@ -192,6 +197,15 @@
192
197
  top: 0;
193
198
  transform: translateX(-50%);
194
199
  z-index: -2;
200
+
201
+ // Hack for IE11
202
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
203
+ background: linear-gradient(270deg,
204
+ color('green') -12%,
205
+ color('blue') 11%,
206
+ color('petrol') 43%,
207
+ color('petrol', 'step--1') 100%);
208
+ }
195
209
  }
196
210
 
197
211
  ul {
@@ -83,6 +83,19 @@
83
83
  }
84
84
  }
85
85
 
86
+ &--features {
87
+ thead th,
88
+ tbody td,
89
+ tfoot td {
90
+ background: transparent;
91
+ }
92
+
93
+ thead th {
94
+ color: inherit;
95
+ font-weight: weight();
96
+ }
97
+ }
98
+
86
99
  @media (min-width: 30em) {
87
100
  .c-icon {
88
101
  font-size: 1.5rem;
@@ -10,7 +10,8 @@
10
10
  {{ libraryList('Logo', '/brand/logo/', page.url) }}
11
11
  {{ libraryList('Colors', '/brand/colors/', page.url) }}
12
12
  {{ libraryList('Typography', '/brand/typography/', page.url) }}
13
- {{ libraryList('Images', '/brand/images/', page.url) }}
13
+ {{ libraryList('Photography', '/brand/images/', page.url) }}
14
+ {{ libraryList('Illustration', '/brand/illustration/', page.url) }}
14
15
  </ul>
15
16
  {# <h3>Brand identity</h3>
16
17
  <ul>
@@ -4,10 +4,10 @@
4
4
  <a href="/prototype/products">Products</a>
5
5
  </li>
6
6
  <li>
7
- <a href="/prototype/products">Industries</a>
7
+ <a href="/prototype/sections">Solutions</a>
8
8
  </li>
9
9
  <li>
10
- <a href="">Services and support</a>
10
+ <a href="">CRO services</a>
11
11
  </li>
12
12
  <li>
13
13
  <a href="/prototype/webinars">Webinars and events</a>
@@ -15,6 +15,9 @@
15
15
  <li>
16
16
  <a href="">Resources</a>
17
17
  </li>
18
+ <li>
19
+ <a href="">Support & downloads</a>
20
+ </li>
18
21
  <li class="c-header__push">
19
22
  <a href="">Log in</a>
20
23
  </li>
@@ -23,6 +23,7 @@
23
23
  @import '~comp/scroll-spy/scroll-spy.scss';
24
24
  @import '~comp/series/series.scss';
25
25
  @import '~comp/comparison-table/comparison-table.scss';
26
+ @import '~comp/features-table/features-table.scss';
26
27
  @import '~comp/meta-box/meta-box.scss';
27
28
  @import '~comp/slat/slat.scss';
28
29
  @import '~comp/hero/hero.scss';
@@ -22,6 +22,7 @@
22
22
  max-height: 90vh;
23
23
  margin: auto;
24
24
  display: block;
25
+ object-fit: contain;
25
26
  }
26
27
  }
27
28
  }
@@ -321,10 +321,13 @@
321
321
  }
322
322
 
323
323
  &__swatch-grid--has-labels {
324
- grid-template-columns: 15em auto;
325
- grid-template-rows: auto;
326
324
  grid-auto-flow: row;
327
325
 
326
+ @media only screen and (min-width: 40em) {
327
+ grid-template-columns: minmax(15%, 15em) auto;
328
+ grid-template-rows: auto;
329
+ }
330
+
328
331
  @media only screen and (min-width:1000px) {
329
332
  grid-auto-flow: column;
330
333
  grid-template-columns: repeat(5, 1fr);
@@ -571,6 +574,16 @@
571
574
 
572
575
  }
573
576
 
577
+ &__illustration-grid {
578
+ display:grid;
579
+ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
580
+ gap:var(--gutter);
581
+
582
+ & :nth-child(odd):nth-last-child(3) {
583
+ grid-column: 1/-1;
584
+ }
585
+ }
586
+
574
587
  .c-alert ul li {
575
588
  list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;
576
589
  margin-left: 1em;