mp-design-system 0.9.29 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/build/js/app.js +1 -1
- 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/button/button.config.js +6 -0
- package/src/_includes/components/button/button.scss +7 -0
- package/src/_includes/components/card/card.config.js +143 -1
- package/src/_includes/components/card/card.scss +13 -0
- package/src/_includes/components/input/checkbox.config.js +6 -0
- package/src/_includes/components/input/checkbox.njk +2 -2
- package/src/_includes/components/input/input.config.js +6 -0
- package/src/_includes/components/input/input.njk +1 -1
- package/src/_includes/components/input/input.scss +11 -0
- package/src/_includes/components/input/radio.config.js +6 -0
- package/src/_includes/components/input/radio.njk +2 -2
- package/src/_includes/components/input/radio.scss +13 -0
- package/src/_includes/components/input/select.config.js +6 -0
- package/src/_includes/components/input/select.njk +1 -1
- package/src/_includes/components/input/textarea.config.js +6 -0
- package/src/_includes/components/input/textarea.njk +1 -1
- package/src/_includes/components/input/toggle.config.js +6 -0
- package/src/_includes/components/input/toggle.njk +2 -2
- package/src/_includes/components/input/toggle.scss +16 -0
- package/src/_includes/components/tabs/tabs.config.js +5 -5
- package/src/_includes/components/tabs/tabs.njk +1 -1
- package/src/_includes/components/tabs/tabs.scss +4 -0
- package/src/_includes/components/twi/twi.njk +1 -1
- package/src/_includes/includes/system-scripts.njk +1 -1
- package/src/_includes/layout.njk +1 -0
- package/src/_includes/system-home-page.njk +1 -0
- package/src/assets/js/app.js +2 -0
- package/src/assets/js/imports/off-canvas.js +97 -0
- package/src/assets/scss/elements/reset.scss +0 -7
- package/src/assets/scss/objects/index.scss +1 -0
- package/src/assets/scss/objects/off-canvas.scss +85 -0
- package/src/assets/scss/utilities/link.scss +1 -0
- package/src/components/iconography.njk +3 -0
- package/src/index.njk +14 -7
- package/src/patterns/form.njk +324 -151
- package/src/patterns/off-canvas.njk +42 -0
- package/src/prototype/index.njk +2 -2
- package/src/static/svg/sprite.svg +41 -20
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Off canvas
|
|
3
|
+
layout: patterns-page
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{%- from "components/button/macro.njk" import button -%}
|
|
7
|
+
{%- from "components/input/macro.njk" import checkbox -%}
|
|
8
|
+
|
|
9
|
+
<div class="u-flow">
|
|
10
|
+
<button class="c-button c-button--off-canvas-toggle" aria-controls="areas-of-interest" aria-expanded="false" data-target="areas-of-interest" aria-label="Toggle areas of interest">Add areas of interest</button>
|
|
11
|
+
<aside class="o-off-canvas" id="areas-of-interest" tabindex="-1" aria-hidden="true">
|
|
12
|
+
<div class="o-off-canvas__backdrop" role="presentation"></div>
|
|
13
|
+
<div class="o-off-canvas__content" role="dialog" aria-modal="true" aria-labelledby="c-label">
|
|
14
|
+
<header class="o-off-canvas__header">
|
|
15
|
+
<label class="c-label">Areas of interest</label>
|
|
16
|
+
</header>
|
|
17
|
+
<main class="o-off-canvas__main">
|
|
18
|
+
<div class="u-flow--m">
|
|
19
|
+
{% for _ in ["3D structure / imaging", "Binding affinity", "Binding kinetics", "Chemical identification", "Contaminant detection and analysis", "Crystal structure determination", "Elemental analysis", "Elemental quantification", "Enzyme kinetics", "Epitaxy analysis", "Ground truthing", "Interface roughness", "Label-free analysis", "Microrheology", "Moisture content", "Molecular size", "Molecular structure", "Molecular weight", "Particle concentration", "Particle shape", "Particle size", "Phase identification", "Phase quantification", "Pore size distribution", "Powder flow", "Protein aggregation", "Protein mobility", "Protein stability", "Reciprocal space analysis", "Remote sensing", "Residual stress", "Texture analysis", "Thin film metrology", "Viscosity", "Zeta potential"] %}
|
|
20
|
+
<div>
|
|
21
|
+
{{ checkbox({
|
|
22
|
+
label: _,
|
|
23
|
+
name: 'tenets',
|
|
24
|
+
id: _,
|
|
25
|
+
value: _
|
|
26
|
+
})}}
|
|
27
|
+
</div>
|
|
28
|
+
{% endfor %}
|
|
29
|
+
</div>
|
|
30
|
+
</main>
|
|
31
|
+
<footer class="o-off-canvas__footer">
|
|
32
|
+
{{ button({ label: 'Update', type: 'a', classes: 'o-off-canvas__update' }) }}
|
|
33
|
+
<button class="mp c-twi o-off-canvas__close c-twi--left">
|
|
34
|
+
<span>Cancel</span>
|
|
35
|
+
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--cross">
|
|
36
|
+
<use xlink:href="/static/svg/sprite.svg#cross"></use>
|
|
37
|
+
</svg>
|
|
38
|
+
</button>
|
|
39
|
+
</footer>
|
|
40
|
+
</div>
|
|
41
|
+
</aside>
|
|
42
|
+
</div>
|
package/src/prototype/index.njk
CHANGED
|
@@ -113,9 +113,9 @@ tags: prototype
|
|
|
113
113
|
<div class="mp c-tabs c-tabs--anchor">
|
|
114
114
|
<nav class="c-tabs__controls u-scroll-shadows--h">
|
|
115
115
|
<ul class="c-tabs__controls-list">
|
|
116
|
-
<li><a class="c-tabs__control
|
|
116
|
+
<li><a class="c-tabs__control " href="#tab-industry-1">Primary materials</a></li>
|
|
117
117
|
<li><a class="c-tabs__control" href="#tab-industry-2">Pharmaceuticals and food</a></li>
|
|
118
|
-
<li><a class="c-tabs__control" href="#tab-industry-3">Advanced materials</a></li>
|
|
118
|
+
<li><a class="c-tabs__control c-tabs__control--active" href="#tab-industry-3">Advanced materials</a></li>
|
|
119
119
|
</ul>
|
|
120
120
|
</nav>
|
|
121
121
|
|
|
@@ -1,21 +1,42 @@
|
|
|
1
|
-
<svg width="0" height="0">
|
|
2
|
-
|
|
3
|
-
<symbol
|
|
4
|
-
|
|
5
|
-
<symbol
|
|
6
|
-
|
|
7
|
-
<symbol
|
|
8
|
-
|
|
9
|
-
<symbol
|
|
10
|
-
|
|
11
|
-
<symbol
|
|
12
|
-
|
|
13
|
-
<symbol
|
|
14
|
-
|
|
15
|
-
<symbol
|
|
16
|
-
|
|
17
|
-
<symbol
|
|
18
|
-
|
|
19
|
-
<symbol
|
|
20
|
-
|
|
1
|
+
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
|
|
3
|
+
<symbol id="arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12H2M2 12L9 5M2 12L9 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
|
|
4
|
+
|
|
5
|
+
<symbol id="arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12H22M22 12L15 5M22 12L15 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
|
|
6
|
+
|
|
7
|
+
<symbol id="chevron-down" viewBox="0 0 24 24" fill="none"><path d="M4 8L12 16L20 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
|
|
8
|
+
|
|
9
|
+
<symbol id="chevron-up" viewBox="0 0 24 24" fill="none"><path d="M4 16l8-8 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
|
|
10
|
+
|
|
11
|
+
<symbol id="cross" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 5L5 19M5 5l14 14"/></symbol>
|
|
12
|
+
|
|
13
|
+
<symbol id="dash" viewBox="0 0 24 24" fill="none"><path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
|
|
14
|
+
|
|
15
|
+
<symbol id="facebook" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12C23 5.92486 18.0751 1 12 1C5.92486 1 1 5.92486 1 12C1 17.4903 5.02252 22.0412 10.2812 22.8664V15.1797H7.48828V12H10.2812V9.57656C10.2812 6.81969 11.9235 5.29688 14.4361 5.29688C15.6397 5.29688 16.8984 5.51172 16.8984 5.51172V8.21875H15.5114C14.145 8.21875 13.7188 9.06674 13.7188 9.93664V12H16.7695L16.2818 15.1797H13.7188V22.8664C18.9775 22.0412 23 17.4903 23 12Z" /></symbol>
|
|
16
|
+
|
|
17
|
+
<symbol id="file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></symbol>
|
|
18
|
+
|
|
19
|
+
<symbol id="info" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10z"/></symbol>
|
|
20
|
+
|
|
21
|
+
<symbol id="instagram" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0025 6.35828C8.88098 6.35828 6.36319 8.87607 6.36319 11.9975C6.36319 15.119 8.88098 17.6368 12.0025 17.6368C15.1239 17.6368 17.6417 15.119 17.6417 11.9975C17.6417 8.87607 15.1239 6.35828 12.0025 6.35828ZM12.0025 15.6638C9.98528 15.6638 8.3362 14.0196 8.3362 11.9975C8.3362 9.97546 9.98037 8.33129 12.0025 8.33129C14.0245 8.33129 15.6687 9.97546 15.6687 11.9975C15.6687 14.0196 14.0196 15.6638 12.0025 15.6638ZM19.1877 6.12761C19.1877 6.8589 18.5988 7.44295 17.8724 7.44295C17.1411 7.44295 16.5571 6.85399 16.5571 6.12761C16.5571 5.40123 17.146 4.81227 17.8724 4.81227C18.5988 4.81227 19.1877 5.40123 19.1877 6.12761ZM22.9227 7.46258C22.8393 5.70061 22.4368 4.13988 21.146 2.85399C19.8601 1.5681 18.2994 1.16564 16.5374 1.0773C14.7215 0.974233 9.27853 0.974233 7.46258 1.0773C5.70552 1.16074 4.14479 1.56319 2.85399 2.84908C1.56319 4.13497 1.16564 5.69571 1.0773 7.45767C0.974233 9.27362 0.974233 14.7166 1.0773 16.5325C1.16074 18.2945 1.56319 19.8552 2.85399 21.1411C4.14479 22.427 5.70061 22.8294 7.46258 22.9178C9.27853 23.0209 14.7215 23.0209 16.5374 22.9178C18.2994 22.8344 19.8601 22.4319 21.146 21.1411C22.4319 19.8552 22.8344 18.2945 22.9227 16.5325C23.0258 14.7166 23.0258 9.27853 22.9227 7.46258ZM20.5767 18.481C20.1939 19.4429 19.4528 20.184 18.4859 20.5718C17.038 21.146 13.6025 21.0135 12.0025 21.0135C10.4025 21.0135 6.96196 21.1411 5.51902 20.5718C4.55705 20.189 3.81595 19.4479 3.42822 18.481C2.85399 17.0331 2.9865 13.5975 2.9865 11.9975C2.9865 10.3975 2.8589 6.95706 3.42822 5.51411C3.81104 4.55215 4.55215 3.81104 5.51902 3.42331C6.96687 2.84908 10.4025 2.9816 12.0025 2.9816C13.6025 2.9816 17.0429 2.85399 18.4859 3.42331C19.4479 3.80613 20.189 4.54724 20.5767 5.51411C21.1509 6.96196 21.0184 10.3975 21.0184 11.9975C21.0184 13.5975 21.1509 17.038 20.5767 18.481Z" /></symbol>
|
|
22
|
+
|
|
23
|
+
<symbol id="linkedin" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.479 2H3.583C2.727 2 2 2.677 2 3.511V21.488C2 22.323 2.477 23 3.333 23H21.229C22.086 23 23 22.323 23 21.488V3.511C23 2.677 22.336 2 21.479 2ZM10 10H12.827V11.441H12.858C13.289 10.664 14.562 9.875 16.136 9.875C19.157 9.875 20 11.479 20 14.45V20H17V14.997C17 13.667 16.469 12.5 15.227 12.5C13.719 12.5 13 13.521 13 15.197V20H10V10ZM5 20H8V10H5V20ZM8.375 6.5C8.375 7.536 7.536 8.375 6.5 8.375C5.464 8.375 4.625 7.536 4.625 6.5C4.625 5.464 5.464 4.625 6.5 4.625C7.536 4.625 8.375 5.464 8.375 6.5Z" /></symbol>
|
|
24
|
+
|
|
25
|
+
<symbol id="lock" viewBox="0 0 25 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.45 4.17A4 4 0 0 1 16.28 7v3h-8V7a4 4 0 0 1 1.17-2.83ZM6.28 10V7a6 6 0 1 1 12 0v3h.22c1.64 0 2.78 1.46 2.78 3v7c0 1.54-1.14 3-2.78 3H6.06c-1.65 0-2.78-1.46-2.78-3v-7c0-1.54 1.13-3 2.78-3h.22Zm1 2H6.06c-.33 0-.78.33-.78 1v7c0 .67.45 1 .78 1H18.5c.32 0 .78-.33.78-1v-7c0-.67-.46-1-.78-1H7.28Zm3 3.35a2 2 0 1 1 3 1.73v1.77a1 1 0 1 1-2 0v-1.77a2 2 0 0 1-1-1.73Z" /></symbol>
|
|
26
|
+
|
|
27
|
+
<symbol id="log-out" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9M16 17L21 12M21 12L16 7M21 12H9"/></symbol>
|
|
28
|
+
|
|
29
|
+
<symbol id="play" viewBox="0 0 24 24" fill="none"><path fill="currentColor" d="M3 2v20l18-10L3 2z"/></symbol>
|
|
30
|
+
|
|
31
|
+
<symbol id="rss" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 10.5C6.38695 10.5 8.67613 11.4482 10.364 13.136C12.0518 14.8239 13 17.1131 13 19.5M4 3.5C8.24346 3.5 12.3131 5.18571 15.3137 8.18629C18.3143 11.1869 20 15.2565 20 19.5M6 18.5C6 19.0523 5.55228 19.5 5 19.5C4.44772 19.5 4 19.0523 4 18.5C4 17.9477 4.44772 17.5 5 17.5C5.55228 17.5 6 17.9477 6 18.5Z"/></symbol>
|
|
32
|
+
|
|
33
|
+
<symbol id="search" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 22l-4.5-4.5M20 11a9 9 0 11-18 0 9 9 0 0118 0z"/></symbol>
|
|
34
|
+
|
|
35
|
+
<symbol id="tick" viewBox="0 0 24 24" fill="none"><path d="M4 12.3529L9.64706 18L21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
|
|
36
|
+
|
|
37
|
+
<symbol id="twitter" viewBox="0 0 24 24" fill="currentColor"><path d="M7.54752 21.5012C16.6042 21.5012 21.5578 13.9979 21.5578 7.49101C21.5578 7.27789 21.5578 7.06573 21.5434 6.85453C22.507 6.15748 23.3389 5.29441 24 4.30573C23.1013 4.70394 22.148 4.96508 21.1718 5.08045C22.1998 4.46507 22.9691 3.49719 23.3366 2.35693C22.3701 2.93049 21.3126 3.3347 20.2099 3.55213C19.4675 2.76271 18.4856 2.23997 17.4162 2.06481C16.3468 1.88966 15.2494 2.07184 14.294 2.58318C13.3385 3.09452 12.5782 3.9065 12.1307 4.89348C11.6833 5.88045 11.5735 6.98739 11.8186 8.04301C9.86088 7.94486 7.94572 7.43613 6.19741 6.54981C4.4491 5.6635 2.90672 4.41943 1.6704 2.89837C1.04073 3.98236 0.847872 5.2656 1.1311 6.48679C1.41433 7.70798 2.15234 8.77532 3.19488 9.47149C2.41127 9.44826 1.64475 9.23688 0.96 8.85517C0.96 8.87533 0.96 8.89645 0.96 8.91757C0.960311 10.0544 1.35385 11.1562 2.07387 12.0359C2.79389 12.9157 3.79606 13.5193 4.9104 13.7444C4.18547 13.9421 3.42488 13.9711 2.68704 13.8289C3.00169 14.8073 3.61427 15.6629 4.43911 16.276C5.26395 16.8892 6.25979 17.2291 7.28736 17.2484C5.54375 18.6188 3.38982 19.3627 1.17216 19.3604C0.780387 19.3597 0.388996 19.336 0 19.2894C2.25181 20.7345 4.87192 21.501 7.54752 21.4974"/></symbol>
|
|
38
|
+
|
|
39
|
+
<symbol id="warning" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"/></symbol>
|
|
40
|
+
|
|
41
|
+
<symbol id="youtube" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5002 6.62364C23.2236 5.59039 22.4116 4.7784 21.3783 4.50181C19.5054 4 12 4 12 4C12 4 4.49457 4 2.62364 4.50181C1.59039 4.7784 0.7784 5.59039 0.501811 6.62364C0 8.49457 0 12.4004 0 12.4004C0 12.4004 0 16.3062 0.501811 18.1771C0.7784 19.2104 1.59039 20.0224 2.62364 20.299C4.49457 20.8008 12 20.8008 12 20.8008C12 20.8008 19.5054 20.8008 21.3764 20.299C22.4096 20.0224 23.2216 19.2104 23.4982 18.1771C24 16.3062 24 12.4004 24 12.4004C24 12.4004 24 8.49457 23.5002 6.62364ZM9.5996 16V8.80079L15.8347 12.4004L9.5996 16Z" /></symbol>
|
|
21
42
|
</svg>
|