mp-design-system 1.2.4 → 1.2.5
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.
- package/dist/build/js/app.js +1 -1
- package/dist/build/js/app.js.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/{industry-card → card}/industry-card.config.js +1 -0
- package/src/_includes/components/card/macro.njk +8 -0
- package/src/_includes/components/card/product-comparison-card.config.js +90 -0
- package/src/_includes/components/card/product-comparison-card.njk +37 -0
- package/src/_includes/components/card/product-comparison-card.scss +74 -0
- package/src/_includes/components/input/macro.njk +10 -14
- package/src/_includes/components/twi/twi.scss +1 -1
- package/src/assets/js/app.js +0 -2
- package/src/assets/scss/components/index.scss +2 -1
- package/src/prototype/index.njk +1 -1
- package/src/prototype/sections.njk +1 -1
- package/src/_includes/components/industry-card/macro.njk +0 -5
- /package/src/_includes/components/{industry-card → card}/industry-card.njk +0 -0
- /package/src/_includes/components/{industry-card → card}/industry-card.scss +0 -0
package/package.json
CHANGED
|
@@ -3,3 +3,11 @@
|
|
|
3
3
|
{% macro card(params) %}
|
|
4
4
|
{{ c({ name: 'card' }, params) }}
|
|
5
5
|
{% endmacro %}
|
|
6
|
+
|
|
7
|
+
{% macro industryCard(params) %}
|
|
8
|
+
{{ c({ name: 'industry-card', folder: 'card' }, params) }}
|
|
9
|
+
{% endmacro %}
|
|
10
|
+
|
|
11
|
+
{% macro productComparisonCard(params) %}
|
|
12
|
+
{{ c({ name: 'product-comparison-card', folder: 'card' }, params) }}
|
|
13
|
+
{% endmacro %}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
const categories = require('../component/categories');
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
title: 'Product comparison card',
|
|
5
|
+
category: categories.card,
|
|
6
|
+
component: {
|
|
7
|
+
name: 'product-comparison-card',
|
|
8
|
+
folder: 'card'
|
|
9
|
+
},
|
|
10
|
+
preview: 'cards-three',
|
|
11
|
+
context: {
|
|
12
|
+
title: 'Zetasizer Pro',
|
|
13
|
+
description: 'The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.',
|
|
14
|
+
image: {
|
|
15
|
+
src: '/static/img/range-product-1.jpg',
|
|
16
|
+
alt: ''
|
|
17
|
+
},
|
|
18
|
+
features: [
|
|
19
|
+
{
|
|
20
|
+
icon: 'cross',
|
|
21
|
+
label: 'Classic 90° DLS'
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
icon: 'tick',
|
|
25
|
+
label: 'Dynamic light scattering'
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
icon: 'tick',
|
|
29
|
+
label: 'Static light scattering'
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
icon: 'tick',
|
|
33
|
+
label: 'Non-Invasive Back Scatter DLS'
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
icon: 'cross',
|
|
37
|
+
label: 'Multi-Angle Dynamic Light Scattering'
|
|
38
|
+
}
|
|
39
|
+
],
|
|
40
|
+
footer: {
|
|
41
|
+
buttons: [
|
|
42
|
+
{
|
|
43
|
+
link: '#',
|
|
44
|
+
label: 'More details'
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
link: '#',
|
|
48
|
+
label: 'Request a quote'
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
variants: [
|
|
54
|
+
{
|
|
55
|
+
title: 'Without features list',
|
|
56
|
+
preview: 'cards-three',
|
|
57
|
+
context: {
|
|
58
|
+
title: 'Zetasizer Pro',
|
|
59
|
+
description: 'The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.',
|
|
60
|
+
image: {
|
|
61
|
+
src: '/static/img/range-product-1.jpg',
|
|
62
|
+
alt: ''
|
|
63
|
+
},
|
|
64
|
+
features: [
|
|
65
|
+
],
|
|
66
|
+
footer: {
|
|
67
|
+
buttons: [
|
|
68
|
+
{
|
|
69
|
+
link: '#',
|
|
70
|
+
label: 'More details'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
link: '#',
|
|
74
|
+
label: 'Request a quote'
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
}
|
|
80
|
+
],
|
|
81
|
+
props: [
|
|
82
|
+
{
|
|
83
|
+
table: [
|
|
84
|
+
['title', 'string'],
|
|
85
|
+
['link', 'string'],
|
|
86
|
+
['image', 'object', 'Image object']
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
]
|
|
90
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{%- from "components/button/macro.njk" import button -%}
|
|
2
|
+
{%- from "components/twi/macro.njk" import twi -%}
|
|
3
|
+
|
|
4
|
+
<article class="mp c-product-comparison-card" role="article" aria-label="Product card">
|
|
5
|
+
<div class="c-product-comparison-card__body">
|
|
6
|
+
<h3 class="c-product-comparison-card__heading">{{ params.title }}</h3>
|
|
7
|
+
<p>{{ params.description }}</p>
|
|
8
|
+
{% if params.features | length %}
|
|
9
|
+
<p class="c-product-comparison-card__features-list-heading">Features include</p>
|
|
10
|
+
<ul class="c-product-comparison-card__features-list">
|
|
11
|
+
{% for feature in params.features %}
|
|
12
|
+
<li class="c-product-comparison-card__feature--{{ feature.icon }}">
|
|
13
|
+
{{ twi({
|
|
14
|
+
label: feature.label,
|
|
15
|
+
icon: feature.icon
|
|
16
|
+
}) }}
|
|
17
|
+
</li>
|
|
18
|
+
{% endfor %}
|
|
19
|
+
</ul>
|
|
20
|
+
{% endif %}
|
|
21
|
+
<footer class="c-product-comparison-card__footer">
|
|
22
|
+
{% if params.footer.buttons | length %}
|
|
23
|
+
{% for item in params.footer.buttons %}
|
|
24
|
+
{{ button({
|
|
25
|
+
link: item.link,
|
|
26
|
+
label: item.label,
|
|
27
|
+
colour: 'outline-green' if loop.index0 == 0 else 'green'
|
|
28
|
+
}) }}
|
|
29
|
+
{% endfor %}
|
|
30
|
+
{% endif %}
|
|
31
|
+
</footer>
|
|
32
|
+
</div>
|
|
33
|
+
<figure class="c-product-comparison-card__image">
|
|
34
|
+
<img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
|
|
35
|
+
</figure>
|
|
36
|
+
</article>
|
|
37
|
+
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
.c-product-comparison-card {
|
|
2
|
+
@extend .u-flow--2xs;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-flow: column;
|
|
5
|
+
border: 1px solid color('petrol', 'step-2');
|
|
6
|
+
|
|
7
|
+
& > * + * {
|
|
8
|
+
@include margin-top('2xs');
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&__body {
|
|
12
|
+
@include padding('s-m');
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-flow: column;
|
|
15
|
+
flex-grow: 1;
|
|
16
|
+
|
|
17
|
+
& > * + * {
|
|
18
|
+
@include margin-top('xs');
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&__heading {
|
|
23
|
+
@extend .c-h;
|
|
24
|
+
@extend .c-h--step-1;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&__features-list {
|
|
28
|
+
@include margin-top('2xs');
|
|
29
|
+
list-style: none;
|
|
30
|
+
|
|
31
|
+
&-heading {
|
|
32
|
+
@include margin-top('s');
|
|
33
|
+
font-weight: weight("bold");
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
& > * + * {
|
|
37
|
+
@include margin-top('3xs');
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&__feature {
|
|
42
|
+
|
|
43
|
+
&--tick {
|
|
44
|
+
svg {
|
|
45
|
+
color: color('green');
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&--cross {
|
|
50
|
+
color: color('grey', 'step-2');
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&__footer {
|
|
55
|
+
@include margin-top('auto');
|
|
56
|
+
@include padding-top('s');
|
|
57
|
+
|
|
58
|
+
& > * + * {
|
|
59
|
+
@include margin-top('2xs');
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&__image {
|
|
64
|
+
height: 10em;
|
|
65
|
+
order: -1;
|
|
66
|
+
aspect-ratio: 16/9;
|
|
67
|
+
|
|
68
|
+
img {
|
|
69
|
+
height: 100%;
|
|
70
|
+
width: 100%;
|
|
71
|
+
object-fit: contain;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -1,29 +1,25 @@
|
|
|
1
1
|
{% from "components/component/component.njk" import c %}
|
|
2
2
|
|
|
3
|
-
{% macro
|
|
4
|
-
{{ c({ name: '
|
|
3
|
+
{% macro input(params) %}
|
|
4
|
+
{{ c({ name: 'input' }, params) }}
|
|
5
5
|
{% endmacro %}
|
|
6
6
|
|
|
7
|
-
{% macro
|
|
8
|
-
{{ c({ name: '
|
|
7
|
+
{% macro select(params) %}
|
|
8
|
+
{{ c({ name: 'select', folder: 'input' }, params) }}
|
|
9
9
|
{% endmacro %}
|
|
10
10
|
|
|
11
|
-
{% macro
|
|
12
|
-
{{ c({ name: 'input' }, params) }}
|
|
11
|
+
{% macro textarea(params) %}
|
|
12
|
+
{{ c({ name: 'textarea', folder: 'input' }, params) }}
|
|
13
13
|
{% endmacro %}
|
|
14
14
|
|
|
15
|
-
{% macro
|
|
16
|
-
{{ c({ name: '
|
|
15
|
+
{% macro checkbox(params, type = 'checkbox') %}
|
|
16
|
+
{{ c({ name: 'checkbox', folder: 'input' }, params) }}
|
|
17
17
|
{% endmacro %}
|
|
18
18
|
|
|
19
|
-
{% macro
|
|
20
|
-
{{ c({ name: '
|
|
19
|
+
{% macro radio(params) %}
|
|
20
|
+
{{ c({ name: 'radio', folder: 'input' }, params) }}
|
|
21
21
|
{% endmacro %}
|
|
22
22
|
|
|
23
23
|
{% macro toggle(params, type='toggle') %}
|
|
24
24
|
{{ c({ name: 'toggle', folder: 'input' }, params) }}
|
|
25
25
|
{% endmacro %}
|
|
26
|
-
|
|
27
|
-
{% macro textarea(params) %}
|
|
28
|
-
{{ c({ name: 'textarea', folder: 'input' }, params) }}
|
|
29
|
-
{% endmacro %}
|
package/src/assets/js/app.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import Accordion from './imports/accordion';
|
|
2
2
|
import Carousel from './imports/carousel';
|
|
3
3
|
import ClearForm from './imports/clear-form';
|
|
4
|
-
import Combobox from './imports/combobox';
|
|
5
4
|
import Comparison from './imports/comparison';
|
|
6
5
|
import Gallery from './imports/gallery';
|
|
7
6
|
import HeroPattern from './imports/hero-pattern';
|
|
@@ -23,7 +22,6 @@ import Tabs from './imports/tabs';
|
|
|
23
22
|
Accordion();
|
|
24
23
|
Carousel();
|
|
25
24
|
ClearForm();
|
|
26
|
-
Combobox();
|
|
27
25
|
Comparison();
|
|
28
26
|
Gallery();
|
|
29
27
|
HeroPattern();
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
@import '~comp/button/button.scss';
|
|
5
5
|
@import '~comp/campaign/campaign.scss';
|
|
6
6
|
@import '~comp/card/card.scss';
|
|
7
|
+
@import '~comp/card/industry-card.scss';
|
|
8
|
+
@import '~comp/card/product-comparison-card.scss';
|
|
7
9
|
@import '~comp/comparison-table/comparison-table.scss';
|
|
8
10
|
@import '~comp/embed/embed.scss';
|
|
9
11
|
@import '~comp/featured-article-card/featured-article-card.scss';
|
|
@@ -14,7 +16,6 @@
|
|
|
14
16
|
@import '~comp/header/header.scss';
|
|
15
17
|
@import '~comp/hero/hero.scss';
|
|
16
18
|
@import '~comp/icon/icon.scss';
|
|
17
|
-
@import '~comp/industry-card/industry-card.scss';
|
|
18
19
|
@import '~comp/input/input.scss';
|
|
19
20
|
@import '~comp/input/radio.scss';
|
|
20
21
|
@import '~comp/input/toggle.scss';
|
package/src/prototype/index.njk
CHANGED
|
@@ -7,7 +7,7 @@ tags: prototype
|
|
|
7
7
|
{% from "components/prose/macro.njk" import prose %}
|
|
8
8
|
{% from "components/signpost/macro.njk" import signpost %}
|
|
9
9
|
{% from "components/button/macro.njk" import button %}
|
|
10
|
-
{% from "components/
|
|
10
|
+
{% from "components/card/macro.njk" import industryCard %}
|
|
11
11
|
{% from "components/campaign/macro.njk" import campaign %}
|
|
12
12
|
{% from "components/card/macro.njk" import card %}
|
|
13
13
|
{% from "components/option-list/macro.njk" import optionList %}
|
|
@@ -15,7 +15,7 @@ tagTitle: Industry
|
|
|
15
15
|
{% from "components/card/macro.njk" import card %}
|
|
16
16
|
{% from "components/hero/macro.njk" import hero %}
|
|
17
17
|
{% from "components/prose/macro.njk" import prose, markdown %}
|
|
18
|
-
{% from "components/
|
|
18
|
+
{% from "components/card/macro.njk" import industryCard %}
|
|
19
19
|
{% from "components/accordion/macro.njk" import accordion %}
|
|
20
20
|
|
|
21
21
|
{% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
|
|
File without changes
|
|
File without changes
|