mp-design-system 1.2.7 → 1.2.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/dist/build/js/app.js +1 -1
  2. package/dist/build/js/app.js.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/comparison-table/comparison-table.config.js +39 -15
  7. package/src/_includes/components/comparison-table/comparison-table.njk +32 -11
  8. package/src/_includes/components/comparison-table/comparison-table.scss +130 -45
  9. package/src/assets/js/imports/comparison.js +10 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mp-design-system",
3
- "version": "1.2.7",
3
+ "version": "1.2.8",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "dev": "npm-run-all --parallel bundle:*",
package/src/_includes/components/comparison-table/comparison-table.config.js CHANGED
@@ -1,30 +1,50 @@
1
1
  const products = [
2
2
  {
3
3
  title: 'Mastersizer 3000',
4
- link: '/prototype/product/',
4
+ buttons: [
5
+ {
6
+ link: '#',
7
+ label: 'More details'
8
+ },
9
+ {
10
+ link: '#',
11
+ label: 'Request a quote'
12
+ }
13
+ ],
5
14
  image: {
6
15
  src: '/static/img/range-product-1.jpg',
7
16
  alt: 'Mastersizer 3000'
8
17
  },
9
18
  description: 'Delivering the data you need for outcomes you can trust',
10
19
  sections: [
11
- ['0.01µm - 3500µm'],
12
- [true],
13
- [true, true]
20
+ ['Laser diffraction', '0.01µm - 3500µm'],
21
+ [true, true, true, false],
22
+ [true, true, true, true, true],
23
+ ['IQ/OQ validation', '21 CFR Part 11 support']
14
24
  ]
15
25
  },
16
26
  {
17
27
  title: 'Mastersizer 3000E',
18
- link: '/prototype/product/',
28
+ buttons: [
29
+ {
30
+ link: '#',
31
+ label: 'More details'
32
+ },
33
+ {
34
+ link: '#',
35
+ label: 'Request a quote'
36
+ }
37
+ ],
19
38
  image: {
20
39
  src: '/static/img/range-product-2.jpg',
21
40
  alt: 'Mastersizer 3000E'
22
41
  },
23
42
  description: 'Entry level particle size analyzer',
24
43
  sections: [
25
- ['0.1µm - 1000µm'],
26
- [true],
27
- [true, false]
44
+ ['Laser diffraction', '0.1µm - 1000µm'],
45
+ [false, false, true, true],
46
+ [true, false, false, false, false],
47
+ ['-', '-']
28
48
  ]
29
49
  }
30
50
  ]
@@ -36,17 +56,22 @@ module.exports = {
36
56
  },
37
57
  context: {
38
58
  sections: [
39
- {
40
- rows: ['Particle size range']
41
- },
42
59
  {
43
60
  title: 'Technology',
44
- rows: ['Laser Diffraction']
61
+ rows: ['Technology', 'Particle size range']
45
62
  },
46
63
  {
47
64
  title: 'Dispersion type',
48
- rows: ['Wet', 'Dry']
49
- }
65
+ rows: ['Automated wet', 'Automated dry powder', 'Manual wet', 'Manual dry powder']
66
+ },
67
+ {
68
+ title: 'Software',
69
+ rows: ['Basic software', 'Advanced method development', 'Comparison software', 'Advanced data quality assessment', 'Reporting']
70
+ },
71
+ {
72
+ title: 'Compliance',
73
+ rows: ['Installation', 'Compliance']
74
+ },
50
75
  ],
51
76
  products: [
52
77
  ...products
@@ -60,7 +85,6 @@ module.exports = {
60
85
  ...products,
61
86
  ...products,
62
87
  ...products,
63
- ...products,
64
88
  ]
65
89
  }
66
90
  }
package/src/_includes/components/comparison-table/comparison-table.njk CHANGED
@@ -1,21 +1,39 @@
1
1
  {% from "components/button/macro.njk" import button %}
2
2
  {% from "components/icon/macro.njk" import icon %}
3
3
 
4
- <div id="product-comparison-table" class="mp c-comparison u-pad-bottom-l">
5
- <div class="c-comparison__mobile"></div>
6
- <div class="c-comparison__wrapper">
7
- <table class="c-table c-table--comparison">
4
+ <section id="product-comparison-table" class="mp u-bg-grey-step-3 u-pad-bottom-l">
5
+ <div class="c-comparison-table__mobile u-wrap"></div>
6
+ <div class="c-comparison-table__desktop u-wrap">
7
+ <table class="c-comparison-table">
8
8
  <thead>
9
9
  <tr>
10
10
  <th></th>
11
11
  {% for product in params.products %}
12
12
  <th>
13
- <a href="/prototype/product" class="c-comparison__link u-flow--prose">
13
+ <div class="c-comparison-table__product">
14
14
  <img alt="{{ product.image.alt }}" src="{{ product.image.src }}" />
15
15
  <h3 class="c-h c-h--step-0">{{ product.title }}</h3>
16
16
  <p>{{ product.description }}</p>
17
- {{ button({ label: 'More details', type: 'span', inline: true }) }}
18
- </a>
17
+ </div>
18
+ </th>
19
+ {% endfor %}
20
+ </tr>
21
+ <tr>
22
+ <th></th>
23
+ {% for product in params.products %}
24
+ <th>
25
+ {% if product.buttons | length %}
26
+ <div class="c-comparison-table__buttons">
27
+ {% for item in product.buttons %}
28
+ {{ button({
29
+ link: item.link,
30
+ label: item.label,
31
+ colour: 'outline-green' if loop.index0 == 0 else 'green',
32
+ classes: 'c-button--small'
33
+ }) }}
34
+ {% endfor %}
35
+ </div>
36
+ {% endif %}
19
37
  </th>
20
38
  {% endfor %}
21
39
  </tr>
@@ -23,8 +41,11 @@
23
41
  <tbody>
24
42
  {% for section in params.sections %}
25
43
  {% if section.title != null %}
26
- <tr class="c-table__title">
27
- <th colspan="{{ params.products | length + 1 }}">{{ section.title }}</th>
44
+ <tr class="c-comparison-table__title">
45
+ <th>
46
+ <span>{{ section.title }}</span>
47
+ </th>
48
+ <th colspan="{{ params.products | length }}"></th>
28
49
  </tr>
29
50
  {% endif %}
30
51
 
@@ -39,7 +60,7 @@
39
60
  {% if value == true %}
40
61
  {{ icon({ id: 'tick' }) }}
41
62
  {% elseif value == false %}
42
- {{ icon({ id: 'dash' }) }}
63
+ {{ icon({ id: 'cross' }) }}
43
64
  {% else %}
44
65
  {{ value }}
45
66
  {% endif %}
@@ -52,4 +73,4 @@
52
73
  </tbody>
53
74
  </table>
54
75
  </div>
55
- </div>
76
+ </section>
package/src/_includes/components/comparison-table/comparison-table.scss CHANGED
@@ -1,44 +1,137 @@
1
- .c-comparison {
2
- max-width: $wrapper;
3
- @include step(-1);
1
+ .c-comparison-table__desktop {
2
+ overflow: auto;
3
+ width: 100%;
4
4
 
5
- &__wrapper {
6
- overflow: auto;
7
- width: 100%;
8
- }
9
-
10
- &__wrapper .c-table {
5
+ .c-comparison-table {
11
6
  width: calc(100% - 1px);
12
- // min-width: $wrapper;
13
7
 
14
8
  @media (min-width: 60em) {
15
- min-width: $wrapper;
16
-
17
9
  tbody > tr > :first-child {
18
10
  min-width: 300px;
19
11
  }
20
12
  }
21
13
  }
14
+ }
15
+
16
+ .c-comparison-table__mobile {
17
+ display: none;
18
+
19
+ & > * + * {
20
+ @include margin-top('m-l');
21
+ }
22
+
23
+ .c-comparison-table {
24
+ width: 100%;
25
+ table-layout: fixed;
22
26
 
23
- &__title {
24
- @include step();
27
+ &__product {
28
+ img {
29
+ @include margin(0);
30
+ }
31
+ }
25
32
  }
33
+ }
26
34
 
27
- &__link {
28
- display: block;
29
- @include padding-bottom('xs');
30
- @include padding-right('s');
35
+ .c-comparison-table {
36
+ @include step(-1);
37
+ border-collapse: collapse;
38
+
39
+ thead {
40
+ th {
41
+ border: 0;
42
+ text-align: center;
43
+ vertical-align: top;
44
+
45
+ }
31
46
  }
32
47
 
33
- &__mobile {
34
- display: none;
48
+ &__product {
49
+ @extend .u-flow--2xs;
35
50
 
36
- & > * + * {
37
- @include margin-top('m-l');
51
+ img {
52
+ @include space('max-height', '3xl');
53
+ @include margin(0, 'auto');
54
+ object-fit: contain;
55
+ mix-blend-mode: multiply;
38
56
  }
39
57
 
40
- .c-table {
41
- table-layout: fixed;
58
+ p {
59
+ font-weight: 400;
60
+ }
61
+ }
62
+
63
+ &__buttons {
64
+ @include margin(0, 'auto');
65
+ margin-top: 1.25rem !important;
66
+ display: inline-flex;
67
+ flex-direction: column;
68
+
69
+ & * + * {
70
+ @include margin-top('2xs');
71
+ }
72
+ }
73
+
74
+ &__title {
75
+ th {
76
+ @include padding-top('xs');
77
+ text-align: left;
78
+
79
+ span {
80
+ @include padding('2xs');
81
+ background-color: color('grey');
82
+ color: color('white');
83
+ max-width: 20em;
84
+ width: 100%;
85
+ display: inline-block;
86
+ position: relative;
87
+ text-align: center;
88
+ font-weight: 600;
89
+
90
+ &::after {
91
+ @include space('border-width', 'xs', 0, 0, 'xs');
92
+ content: "";
93
+ width: 0;
94
+ height: 0;
95
+ border-style: solid;
96
+ border-color: color('grey', 'step-3') transparent transparent transparent;
97
+ position: absolute;
98
+ top: 0;
99
+ right: 0;
100
+ }
101
+ }
102
+ }
103
+ }
104
+
105
+ tbody {
106
+ tr {
107
+ height: 48px;
108
+
109
+ td:first-child {
110
+ text-align: left;
111
+ font-weight: 600;
112
+ }
113
+
114
+ td {
115
+ @include padding('2xs');
116
+ background-color: color('white');
117
+ border: 2px solid color('grey', 'step-3');
118
+ border-right: 0;
119
+ border-left: 0;
120
+ text-align: center;
121
+ vertical-align: middle;
122
+
123
+ .c-icon {
124
+ font-size: 1.5rem;
125
+ }
126
+
127
+ .c-icon--tick {
128
+ color: color('green');
129
+ }
130
+
131
+ .c-icon--cross {
132
+ color: color('grey', 'step-2');
133
+ }
134
+ }
42
135
  }
43
136
  }
44
137
 
@@ -47,48 +140,40 @@
47
140
  display: block;
48
141
  }
49
142
 
50
- &__wrapper {
143
+ &__desktop {
51
144
  display: none;
52
145
  }
53
146
  }
54
-
55
- thead img {
56
- @include space('max-height', '3xl');
57
- object-fit: contain;
58
- }
59
-
60
147
  }
61
148
 
62
149
  @media only screen and (min-width: 640px) {
63
-
64
- .c-table--comparison thead th:nth-last-child(1):nth-child(2),
65
- .c-table--comparison thead th:nth-last-child(1):nth-child(2) ~ th {
150
+ .c-comparison-table thead th:nth-last-child(1):nth-child(2),
151
+ .c-comparison-table thead th:nth-last-child(1):nth-child(2) ~ th {
66
152
  width: 85%;
67
153
  }
68
154
 
69
- .c-table--comparison thead th:nth-last-child(2):nth-child(2),
70
- .c-table--comparison thead th:nth-last-child(2):nth-child(2) ~ th {
155
+ .c-comparison-table thead th:nth-last-child(2):nth-child(2),
156
+ .c-comparison-table thead th:nth-last-child(2):nth-child(2) ~ th {
71
157
  width: 42.5%;
72
158
  }
73
159
 
74
- .c-table--comparison thead th:nth-last-child(3):nth-child(2),
75
- .c-table--comparison thead th:nth-last-child(3):nth-child(2) ~ th {
160
+ .c-comparison-table thead th:nth-last-child(3):nth-child(2),
161
+ .c-comparison-table thead th:nth-last-child(3):nth-child(2) ~ th {
76
162
  width: 28.33333%;
77
163
  }
78
164
 
79
- .c-table--comparison thead th:nth-last-child(4):nth-child(2),
80
- .c-table--comparison thead th:nth-last-child(4):nth-child(2) ~ th {
165
+ .c-comparison-table thead th:nth-last-child(4):nth-child(2),
166
+ .c-comparison-table thead th:nth-last-child(4):nth-child(2) ~ th {
81
167
  width: 21.25%;
82
168
  }
83
169
 
84
- .c-table--comparison thead th:nth-last-child(5):nth-child(2),
85
- .c-table--comparison thead th:nth-last-child(5):nth-child(2) ~ th {
170
+ .c-comparison-table thead th:nth-last-child(5):nth-child(2),
171
+ .c-comparison-table thead th:nth-last-child(5):nth-child(2) ~ th {
86
172
  width: 17%;
87
173
  }
88
174
 
89
- .c-table--comparison thead th:nth-last-child(6):nth-child(2),
90
- .c-table--comparison thead th:nth-last-child(6):nth-child(2) ~ th {
175
+ .c-comparison-table thead th:nth-last-child(6):nth-child(2),
176
+ .c-comparison-table thead th:nth-last-child(6):nth-child(2) ~ th {
91
177
  width: 14.16667%;
92
178
  }
93
-
94
179
  }
package/src/assets/js/imports/comparison.js CHANGED
@@ -1,11 +1,13 @@
1
1
  function Comparison() {
2
- document.querySelectorAll('.c-comparison').forEach(extractMobileComparison)
2
+ console.log(document.querySelectorAll('.c-comparison-table').parentElement)
3
+ document.querySelectorAll('.c-comparison-table').forEach(extractMobileComparison)
3
4
  }
4
5
 
5
6
  function extractMobileComparison(container) {
6
- const body = container.querySelector('.c-table tbody');
7
- const head = container.querySelector('.c-table thead');
8
- const mobile = container.querySelector('.c-comparison__mobile');
7
+ const parent = container.parentNode.parentNode;
8
+ const body = parent.querySelector('.c-comparison-table tbody');
9
+ const head = parent.querySelector('.c-comparison-table thead');
10
+ const mobile = parent.parentElement.querySelector('.c-comparison-table__mobile');
9
11
 
10
12
  if (!body || !head || !mobile) return;
11
13
 
@@ -16,7 +18,7 @@ function extractMobileComparison(container) {
16
18
 
17
19
  Array.from(body.children).forEach(row => {
18
20
  // For table row headers, push to all products
19
- if (row.classList.contains('c-table__title')) {
21
+ if (row.classList.contains('c-comparison-table__title')) {
20
22
  products.forEach(x => {
21
23
  x.table.push({ type: 'title', title: row.children[0].textContent })
22
24
  })
@@ -43,13 +45,11 @@ function extractMobileComparison(container) {
43
45
 
44
46
  function createMobileProduct(product) {
45
47
  const parent = document.createElement('article');
46
- parent.innerHTML = `<div class="c-comparison__content">
47
- ${product.info}
48
- </div>
49
- <table class="c-table">
48
+ parent.innerHTML = `${product.info}
49
+ <table class="c-comparison-table">
50
50
  ${product.table.map(x => {
51
51
  if (x.type === 'title') {
52
- return `<tr class="c-table__title"><th colspan="2">${x.title}</th></tr>`;
52
+ return `<tr class="c-comparison-table__title"><th><span>${x.title}</span></th><th></th></tr>`;
53
53
  } else {
54
54
  return `<tr>
55
55
  <td>${x.key}</td>