mp-design-system 1.0.4 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.0.4",
+  "version": "1.2.1",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

package/src/_data/config.js

@@ -5,7 +5,7 @@ module.exports = function () {
 
   return {
     name: 'Project Franklin',
-    logo: ['Project Franklin', 'Design System', '& Brand guide'],
+    logo: ['Franklin', 'Design system & brand guide'],
     creator: 'Malvern Panalytical',
     dsVersion: package.version,
     url,

package/src/_headers

@@ -0,0 +1,9 @@
+/*
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' polyfill.io; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: p3.aprimocdn.net; font-src 'self' fonts.gstatic.com; frame-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; sandbox allow-forms allow-same-origin allow-scripts;
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: SAMEORIGIN
+  X-XSS-Protection: 1; mode=block
+  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=(), sync-xhr=(), microphone=(), speaker=()
+  Feature-Policy: accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; encrypted-media 'none'; fullscreen 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; picture-in-picture 'none'; speaker 'self'; sync-xhr 'self'; usb 'none'; vr 'none'

package/src/_includes/components/card/card.config.js

@@ -425,7 +425,7 @@ module.exports = {
     },
     {
       title: 'Event card - Series part (home)',
-      preview: 'content-width',
+      preview: 'cards-three',
       context: {
         theme: {
           border: false,
@@ -511,7 +511,7 @@ module.exports = {
     },
     {
       title: 'Event card - Past (home) multicolumn',
-      preview: 'cards-three',
+      preview: 'content-width',
       context: {
         theme: {
           border: false,
@@ -586,8 +586,8 @@ module.exports = {
       }
     },
     {
-      title: 'Article card',
-      preview: 'cards-three-alt',
+      title: 'Article card - single',
+      preview: 'cards-three',
       context: {
         theme: {
           border: false,
@@ -756,6 +756,7 @@ module.exports = {
             timezone: 'EST'
           },
           meta: [
+            'New York',
             'English'
           ],
         },
@@ -798,6 +799,7 @@ module.exports = {
             timezone: 'EST'
           },
           meta: [
+            'New York',
             'English'
           ],
         },
@@ -834,6 +836,7 @@ module.exports = {
             duration: '36:01'
           },
           meta: [
+            'Remote',
             'English'
           ]
         },
@@ -874,6 +877,7 @@ module.exports = {
             duration: '36:01'
           },
           meta: [
+            'Remote',
             'English'
           ]
         },
@@ -894,7 +898,7 @@ module.exports = {
     },
     {
       title: 'Event series card',
-      preview: 'content-width',
+      preview: 'cards-three',
       context: {
         theme: {
           border: false,
@@ -922,7 +926,7 @@ module.exports = {
     },
     {
       title: 'Event series card with image',
-      preview: 'content-width',
+      preview: 'cards-three',
       context: {
         theme: {
           border: false,

package/src/_includes/components/component/preview-cards-three-alt.njk

@@ -1,3 +1,3 @@
-<div class="o-grid o-grid--of-three u-bg-petrol-step-3">
+<div class="o-grid o-grid--of-three u-bg-petrol-step-3 u-pad-m">
   {{ comp | safe }}
 </div>

package/src/_includes/components/component/preview-cards-three.njk

@@ -1,3 +1,3 @@
-<div class="o-grid o-grid--of-three">
+<div class="o-grid o-grid--of-three u-pad-m">
   {{ comp | safe }}
 </div>

package/src/_includes/components/component/preview-cards-two.njk

@@ -1,3 +1,3 @@
-<div class="o-grid o-grid--of-two">
+<div class="o-grid o-grid--of-two u-pad-m">
   {{ comp | safe }}
 </div>

package/src/_includes/components/component/preview-content-width.njk

@@ -1,4 +1,4 @@
-<div class="o-grid o-grid--layout o-grid--8/3">
+<div class="o-grid o-grid--layout o-grid--8/3 u-pad-m">
   <div>
     {{ comp | safe }}
   </div>

package/src/_includes/components/component/preview-default.njk

@@ -1,3 +1,3 @@
-<div class="u-pad-3xs">
+<div class="u-pad-m">
   {{ comp | safe }}
 </div>

package/src/_includes/components/component/preview-form.njk

@@ -1,3 +1,3 @@
-<form class="mp o-grid o-grid--of-two u-pad-3xs">
+<form class="mp o-grid o-grid--of-two u-pad-m">
   {{ comp | safe }}
 </form>

package/src/_includes/components/dynamic-form/dynamic-form.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  title: 'Dynamic form',
+  component: {
+    name: 'dynamic-form'
+  },
+  context: {
+    label: 'Find the perfect event for you'
+  },
+  props: [
+    {
+      table: [
+        ['label', 'string', 'Label the input']
+      ]
+    }
+  ]
+}

package/src/_includes/components/dynamic-form/dynamic-form.njk

@@ -0,0 +1,319 @@
+<div class="o-grid o-grid--8/3 o-grid--float u-wrap">
+        <div id="dynamicForm" class="u-flow u-margin-bottom-l">
+                <form id="EditProfile" class="mp-dynamicform" action="/en/profile/profile" method="post" name="dynamicForm" novalidate="" prefix="a: MP_DynamicForm" typeof="a:MP_DynamicForm">
+                <input name="__RequestVerificationToken" type="hidden" value="WmF3J04mv0dQrbAgTIQE93-NMZvwyf4gTN1MmOzb6xdHxKNf_y5j5s-fbk-2TxMzJhylnVfkGd_CAC2rj7zMRp8g5BaK4N564AXUw3hcaxVdsNuRPNH-HRs-qRNqVm4UXmQ5T9PkVQvLUBceY_Br7g2">
+                <div class="validation-summary-valid" data-valmsg-summary="true">
+                <ul>
+                        <li style="display:none"></li>
+                </ul>
+                </div>
+                <section class="c-form__section u-flow--m">
+                <h3 class="c-form__section-title" property="a:sectionTitle">About you</h3>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="FirstName" property="a:label">First name</label>
+                        <input type="text" id="FirstName" class="c-input" name="First name" autocomplete="given-name" placeholder="" required="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="LastName" property="a:label">Last name</label>
+                        <input type="text" id="LastName" class="c-input" name="Last name" autocomplete="family-name" placeholder="" required="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="Telephone" property="a:label">Telephone</label>
+                        <input type="tel" id="Telephone" class="c-input" name="Telephone" autocomplete="off" placeholder="" required="">
+                </div>
+                <div class="c-form__row  u-disabled">
+                        <label class="c-label c-label--required" for="EmailAddress" property="a:label">Email address</label>
+                        <input type="email" id="EmailAddress" class="c-input" name="Email address" autocomplete="off" placeholder="" required="">
+                        <div class="c-input__description u-margin-top-xs">
+                        <p>To change your email address please contact <a href="">website support</a></p>
+                        </div>
+                </div>
+                </section>
+                <section class="c-form__section u-flow--m">
+                <h3 class="c-form-section__title" property="a:sectionTitle">About your company or institution</h3>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="Company" property="a:label">Company / institution</label>
+                        <input type="text" id="Company" class="c-input" name="Company" autocomplete="off" placeholder="" required="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label " for="Department" property="a:label">Department</label>
+                        <input type="text" id="Department" class="c-input" name="Department" autocomplete="off" placeholder="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="Industry" property="a:label">Industry</label>
+                        <select id="Industry" class="c-input c-input--select" name="Industry" autocomplete="off" required="">
+                        <option value=""></option>
+                        <option value="tcm:50-69567-1024">Academia</option>
+                        <option value="tcm:50-41578-1024">Advanced Manufacturing</option>
+                        <option value="tcm:50-66937-1024">Aerospace</option>
+                        <option value="tcm:50-54762-1024">Agriculture</option>
+                        <option value="tcm:50-3961-1024">Agrochemicals</option>
+                        <option value="tcm:50-3926-1024">Automotive</option>
+                        <option value="tcm:50-11176-1024">Biologics</option>
+                        <option value="tcm:50-41783-1024">Building Materials</option>
+                        <option value="tcm:50-3959-1024">Chemicals</option>
+                        <option value="tcm:50-41782-1024">Chemicals/Coatings</option>
+                        <option value="tcm:50-3976-1024">Electronics/Optics</option>
+                        <option value="tcm:50-6943-1024">Energy/Battery</option>
+                        <option value="tcm:50-3938-1024">Environment</option>
+                        <option value="tcm:50-3939-1024">Food and Beverages</option>
+                        <option value="tcm:50-66938-1024">Government/Institutes</option>
+                        <option value="tcm:50-66939-1024">Manufacturing, Research and Analytical Services</option>
+                        <option value="tcm:50-3944-1024">Metals</option>
+                        <option value="tcm:50-41781-1024">Minerals</option>
+                        <option value="tcm:50-41780-1024">Mining</option>
+                        <option value="tcm:50-3949-1024">Oils, Fuels and Chemicals</option>
+                        <option value="tcm:50-3933-1024">Personal Care Products</option>
+                        <option value="tcm:50-11180-1024">Pharmaceutical</option>
+                        <option value="tcm:50-3958-1024">Polymers</option>
+                        <option value="tcm:50-41784-1024">Power Generation</option>
+                        <option value="tcm:50-3968-1024">Service labs/Integrators</option>
+                        <option value="tcm:50-66946-1024">University</option>
+                        </select>
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="City" property="a:label">City</label>
+                        <input type="text" id="City" class="c-input" name="City" autocomplete="address-level2" placeholder="" required="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="Country" property="a:label">Country</label>
+                        <select id="Country" class="c-input c-input--select" name="Country" autocomplete="country" required="">
+                        <option value=""></option>
+                        <option value="tcm:50-4994-1024">United States</option>
+                        <option value="tcm:50-4993-1024">United Kingdom</option>
+                        <option value="tcm:50-4995-1024">Afghanistan</option>
+                        <option value="tcm:50-4996-1024">Albania</option>
+                        <option value="tcm:50-4997-1024">Algeria</option>
+                        <option value="tcm:50-4999-1024">Andorra</option>
+                        <option value="tcm:50-5000-1024">Angola</option>
+                        <option value="tcm:50-5001-1024">Anguilla</option>
+                        <option value="tcm:50-5002-1024">Antarctica</option>
+                        <option value="tcm:50-5003-1024">Antigua and Barbuda</option>
+                        <option value="tcm:50-5004-1024">Argentina</option>
+                        <option value="tcm:50-5005-1024">Armenia</option>
+                        <option value="tcm:50-5006-1024">Aruba</option>
+                        <option value="tcm:50-5007-1024">Australia</option>
+                        <option value="tcm:50-5008-1024">Austria</option>
+                        <option value="tcm:50-5009-1024">Azerbaijan</option>
+                        <option value="tcm:50-5190-1024">Bahamas</option>
+                        <option value="tcm:50-5010-1024">Bahrain</option>
+                        <option value="tcm:50-5011-1024">Bangladesh</option>
+                        <option value="tcm:50-5012-1024">Barbados</option>
+                        <option value="tcm:50-5013-1024">Belarus</option>
+                        <option value="tcm:50-5014-1024">Belgium</option>
+                        <option value="tcm:50-5015-1024">Belize</option>
+                        <option value="tcm:50-5016-1024">Benin</option>
+                        <option value="tcm:50-5017-1024">Bermuda</option>
+                        <option value="tcm:50-5018-1024">Bhutan</option>
+                        <option value="tcm:50-5019-1024">Bolivia</option>
+                        <option value="tcm:50-5020-1024">Bosnia and Herzegovina</option>
+                        <option value="tcm:50-5021-1024">Botswana</option>
+                        <option value="tcm:50-15011-1024">Bouvet Islands</option>
+                        <option value="tcm:50-5022-1024">Brazil</option>
+                        <option value="tcm:50-14999-1024">British Indian Ocean Territory</option>
+                        <option value="tcm:50-5023-1024">British Virgin Islands</option>
+                        <option value="tcm:50-5024-1024">Brunei Darussalam</option>
+                        <option value="tcm:50-5025-1024">Bulgaria</option>
+                        <option value="tcm:50-5026-1024">Burkina Faso</option>
+                        <option value="tcm:50-5027-1024">Burundi</option>
+                        <option value="tcm:50-5028-1024">Cambodia</option>
+                        <option value="tcm:50-5029-1024">Cameroon</option>
+                        <option value="tcm:50-4990-1024">Canada</option>
+                        <option value="tcm:50-5030-1024">Cape Verde</option>
+                        <option value="tcm:50-5031-1024">Cayman Islands</option>
+                        <option value="tcm:50-5032-1024">Central African Republic</option>
+                        <option value="tcm:50-5033-1024">Chad</option>
+                        <option value="tcm:50-5034-1024">Chile</option>
+                        <option value="tcm:50-5035-1024">China</option>
+                        <option value="tcm:50-5036-1024">Christmas Island</option>
+                        <option value="tcm:50-5038-1024">Colombia</option>
+                        <option value="tcm:50-5039-1024">Comoros</option>
+                        <option value="tcm:50-5042-1024">Cook Islands</option>
+                        <option value="tcm:50-5043-1024">Costa Rica</option>
+                        <option value="tcm:50-5044-1024">Cote d'Ivoire</option>
+                        <option value="tcm:50-5045-1024">Croatia</option>
+                        <option value="tcm:50-15007-1024">Cuba</option>
+                        <option value="tcm:50-53469-1024">Curacao</option>
+                        <option value="tcm:50-5046-1024">Cyprus</option>
+                        <option value="tcm:50-5047-1024">Czech Republic</option>
+                        <option value="tcm:50-5041-1024">Democratic Republic of the Congo</option>
+                        <option value="tcm:50-5048-1024">Denmark</option>
+                        <option value="tcm:50-5049-1024">Djibouti</option>
+                        <option value="tcm:50-5050-1024">Dominica</option>
+                        <option value="tcm:50-5051-1024">Dominican Republic</option>
+                        <option value="tcm:50-5133-1024">Dutch Antilles</option>
+                        <option value="tcm:50-5192-1024">East Timor</option>
+                        <option value="tcm:50-5052-1024">Ecuador</option>
+                        <option value="tcm:50-5053-1024">Egypt</option>
+                        <option value="tcm:50-5054-1024">El Salvador</option>
+                        <option value="tcm:50-5055-1024">Equatorial Guinea</option>
+                        <option value="tcm:50-5056-1024">Eritrea</option>
+                        <option value="tcm:50-5057-1024">Estonia</option>
+                        <option value="tcm:50-5058-1024">Ethiopia</option>
+                        <option value="tcm:50-5060-1024">Falkland Islands</option>
+                        <option value="tcm:50-5061-1024">Faroe Islands</option>
+                        <option value="tcm:50-5063-1024">Fiji</option>
+                        <option value="tcm:50-5064-1024">Finland</option>
+                        <option value="tcm:50-4991-1024">France</option>
+                        <option value="tcm:50-5065-1024">French Guyana</option>
+                        <option value="tcm:50-5066-1024">French Polynesia</option>
+                        <option value="tcm:50-53471-1024">French Southern Territory</option>
+                        <option value="tcm:50-5067-1024">Gabon</option>
+                        <option value="tcm:50-5191-1024">Gambia</option>
+                        <option value="tcm:50-5068-1024">Georgia</option>
+                        <option value="tcm:50-5069-1024">Germany</option>
+                        <option value="tcm:50-5070-1024">Ghana</option>
+                        <option value="tcm:50-5071-1024">Gibraltar</option>
+                        <option value="tcm:50-5072-1024">Greece</option>
+                        <option value="tcm:50-5073-1024">Greenland</option>
+                        <option value="tcm:50-5074-1024">Grenada</option>
+                        <option value="tcm:50-5075-1024">Guadeloupe</option>
+                        <option value="tcm:50-5076-1024">Guam</option>
+                        <option value="tcm:50-5077-1024">Guatemala</option>
+                        <option value="tcm:50-5078-1024">Guinea</option>
+                        <option value="tcm:50-5079-1024">Guinea-Bissau</option>
+                        <option value="tcm:50-5080-1024">Guyana</option>
+                        <option value="tcm:50-5081-1024">Haiti</option>
+                        <option value="tcm:50-15012-1024">Heard and McDonald Islands</option>
+                        <option value="tcm:50-5082-1024">Honduras</option>
+                        <option value="tcm:50-5084-1024">Hungary</option>
+                        <option value="tcm:50-5085-1024">Iceland</option>
+                        <option value="tcm:50-5086-1024">India</option>
+                        <option value="tcm:50-5087-1024">Indonesia</option>
+                        <option value="tcm:50-5088-1024">Iraq</option>
+                        <option value="tcm:50-5089-1024">Ireland</option>
+                        <option value="tcm:50-5090-1024">Israel</option>
+                        <option value="tcm:50-5091-1024">Italy</option>
+                        <option value="tcm:50-5092-1024">Jamaica</option>
+                        <option value="tcm:50-5093-1024">Japan</option>
+                        <option value="tcm:50-5094-1024">Jordan</option>
+                        <option value="tcm:50-5095-1024">Kazakhstan</option>
+                        <option value="tcm:50-5096-1024">Kenya</option>
+                        <option value="tcm:50-5097-1024">Kiribati</option>
+                        <option value="tcm:50-53473-1024">Kosovo</option>
+                        <option value="tcm:50-5098-1024">Kuwait</option>
+                        <option value="tcm:50-5099-1024">Kyrgyzstan</option>
+                        <option value="tcm:50-5100-1024">Laos</option>
+                        <option value="tcm:50-5101-1024">Latvia</option>
+                        <option value="tcm:50-5102-1024">Lebanon</option>
+                        <option value="tcm:50-5103-1024">Lesotho</option>
+                        <option value="tcm:50-5104-1024">Liberia</option>
+                        <option value="tcm:50-15014-1024">Libya</option>
+                        <option value="tcm:50-5105-1024">Liechtenstein</option>
+                        <option value="tcm:50-5106-1024">Lithuania</option>
+                        <option value="tcm:50-5107-1024">Luxembourg</option>
+                        <option value="tcm:50-5059-1024">Macedonia</option>
+                        <option value="tcm:50-5109-1024">Madagascar</option>
+                        <option value="tcm:50-5110-1024">Malawi</option>
+                        <option value="tcm:50-5111-1024">Malaysia</option>
+                        <option value="tcm:50-5112-1024">Maldives</option>
+                        <option value="tcm:50-5113-1024">Mali</option>
+                        <option value="tcm:50-5114-1024">Malta</option>
+                        <option value="tcm:50-5115-1024">Marshall Islands</option>
+                        <option value="tcm:50-5116-1024">Martinique</option>
+                        <option value="tcm:50-5117-1024">Mauritania</option>
+                        <option value="tcm:50-5119-1024">Mayotte</option>
+                        <option value="tcm:50-5120-1024">Mexico</option>
+                        <option value="tcm:50-5062-1024">Micronesia</option>
+                        <option value="tcm:50-5122-1024">Monaco</option>
+                        <option value="tcm:50-5123-1024">Mongolia</option>
+                        <option value="tcm:50-53475-1024">Montenegro</option>
+                        <option value="tcm:50-5125-1024">Montserrat</option>
+                        <option value="tcm:50-5126-1024">Morocco</option>
+                        <option value="tcm:50-5127-1024">Mozambique</option>
+                        <option value="tcm:50-5128-1024">Myanmar</option>
+                        <option value="tcm:50-5129-1024">Namibia</option>
+                        <option value="tcm:50-5130-1024">Nauru</option>
+                        <option value="tcm:50-5131-1024">Nepal</option>
+                        <option value="tcm:50-5132-1024">Netherlands</option>
+                        <option value="tcm:50-5134-1024">New Caledonia</option>
+                        <option value="tcm:50-5135-1024">New Zealand</option>
+                        <option value="tcm:50-5136-1024">Nicaragua</option>
+                        <option value="tcm:50-5137-1024">Niger</option>
+                        <option value="tcm:50-5138-1024">Nigeria</option>
+                        <option value="tcm:50-5140-1024">Norfolk Islands</option>
+                        <option value="tcm:50-5141-1024">North Mariana Islands</option>
+                        <option value="tcm:50-5142-1024">Norway</option>
+                        <option value="tcm:50-5143-1024">Oman</option>
+                        <option value="tcm:50-5144-1024">Pakistan</option>
+                        <option value="tcm:50-5145-1024">Palau</option>
+                        <option value="tcm:50-5146-1024">Palestine</option>
+                        <option value="tcm:50-5147-1024">Panama</option>
+                        <option value="tcm:50-5148-1024">Papua New Guinea</option>
+                        <option value="tcm:50-5149-1024">Paraguay</option>
+                        <option value="tcm:50-5150-1024">Peru</option>
+                        <option value="tcm:50-5151-1024">Philippines</option>
+                        <option value="tcm:50-5152-1024">Pitcairn Islands</option>
+                        <option value="tcm:50-5153-1024">Poland</option>
+                        <option value="tcm:50-5154-1024">Portugal</option>
+                        <option value="tcm:50-5155-1024">Puerto Rico</option>
+                        <option value="tcm:50-5156-1024">Qatar</option>
+                        <option value="tcm:50-5157-1024">Reunion</option>
+                        <option value="tcm:50-5158-1024">Romania</option>
+                        <option value="tcm:50-5159-1024">Russian Federation</option>
+                        <option value="tcm:50-5160-1024">Rwanda</option>
+                        <option value="tcm:50-5179-1024">Saint Kitts and Nevis</option>
+                        <option value="tcm:50-5162-1024">Samoa</option>
+                        <option value="tcm:50-5163-1024">San Marino</option>
+                        <option value="tcm:50-5164-1024">Sao Tome and Principe</option>
+                        <option value="tcm:50-5165-1024">Saudi Arabia</option>
+                        <option value="tcm:50-5166-1024">Senegal</option>
+                        <option value="tcm:50-53477-1024">Serbia</option>
+                        <option value="tcm:50-5168-1024">Seychelles</option>
+                        <option value="tcm:50-5169-1024">Sierra Leone</option>
+                        <option value="tcm:50-4992-1024">Singapore</option>
+                        <option value="tcm:50-53479-1024">Sint Maarten</option>
+                        <option value="tcm:50-5170-1024">Slovakia</option>
+                        <option value="tcm:50-5171-1024">Slovenia</option>
+                        <option value="tcm:50-5172-1024">Solomon Islands</option>
+                        <option value="tcm:50-5173-1024">Somalia</option>
+                        <option value="tcm:50-5174-1024">South Africa</option>
+                        <option value="tcm:50-15018-1024">South Georgia and the Southern Sandwich Islands</option>
+                        <option value="tcm:50-5175-1024">South Korea</option>
+                        <option value="tcm:50-5176-1024">Spain</option>
+                        <option value="tcm:50-5177-1024">Sri Lanka</option>
+                        <option value="tcm:50-5180-1024">St. Lucia</option>
+                        <option value="tcm:50-15010-1024">Sudan</option>
+                        <option value="tcm:50-5182-1024">Suriname</option>
+                        <option value="tcm:50-5184-1024">Sweden</option>
+                        <option value="tcm:50-5185-1024">Switzerland</option>
+                        <option value="tcm:50-15008-1024">Syria</option>
+                        <option value="tcm:50-5186-1024">Taiwan</option>
+                        <option value="tcm:50-5187-1024">Tajikistan</option>
+                        <option value="tcm:50-5188-1024">Tanzania</option>
+                        <option value="tcm:50-5189-1024">Thailand</option>
+                        <option value="tcm:50-5193-1024">Togo</option>
+                        <option value="tcm:50-5194-1024">Tokelau Islands</option>
+                        <option value="tcm:50-5195-1024">Tonga</option>
+                        <option value="tcm:50-5196-1024">Trinidad and Tobago</option>
+                        <option value="tcm:50-5197-1024">Tunisia</option>
+                        <option value="tcm:50-5198-1024">Turkey</option>
+                        <option value="tcm:50-5199-1024">Turkmenistan</option>
+                        <option value="tcm:50-5200-1024">Turks and Caicos Islands</option>
+                        <option value="tcm:50-5201-1024">Tuvalu</option>
+                        <option value="tcm:50-5203-1024">Uganda</option>
+                        <option value="tcm:50-5204-1024">Ukraine</option>
+                        <option value="tcm:50-5205-1024">United Arab Emirates</option>
+                        <option value="tcm:50-4993-1024">United Kingdom</option>
+                        <option value="tcm:50-4994-1024">United States</option>
+                        <option value="tcm:50-5206-1024">Uruguay</option>
+                        <option value="tcm:50-5207-1024">Uzbekistan</option>
+                        <option value="tcm:50-5208-1024">Vanuatu</option>
+                        <option value="tcm:50-5210-1024">Venezuela</option>
+                        <option value="tcm:50-5211-1024">Vietnam</option>
+                        <option value="tcm:50-5212-1024">Wallis and Futuna Islands</option>
+                        <option value="tcm:50-5213-1024">Yemen</option>
+                        <option value="tcm:50-5214-1024">Zambia</option>
+                        <option value="tcm:50-5215-1024">Zimbabwe</option>
+                        </select>
+                </div>
+                </section>
+                <div class="c-form__section">
+                <button id="btnSubmit" class="mp c-button c-button--inline">
+                        Model.Submit
+                </button>
+                </div>
+                <input type="hidden" name="FirstClickChannel" value="Direct"><input type="hidden" name="FirstClickLandingUrl" value="localhost/en"><input type="hidden" name="LastClickChannel" value="Direct"><input type="hidden" name="LastClickLandingUrl" value="localhost/en/profile"><input type="hidden" name="#SEOInteractions" value="0"><input type="hidden" name="#DirectInteractions" value="12"><input type="hidden" name="#OtherInteractions" value="0"><input type="hidden" name="#GoogleAdsInteractions" value="0"><input type="hidden" name="#LinkedinAdsInteractions" value="0"><input type="hidden" name="#FacebookAdsInteractions" value="0"><input type="hidden" name="#BingAdsInteraction" value="0"><input type="hidden" name="FirstClickGoogleClientID" value="1232913074.1679323359"><input type="hidden" name="LastClickGoogleClientID" value="1232913074.1679323359">
+                </form>
+                </div>
+</div>

package/src/_includes/components/dynamic-form/dynamic-form.scss

@@ -0,0 +1,77 @@
+.mp-dynamicform {
+  .c-form {
+    &__section {
+      @include padding('l');
+      background: color('petrol', 'step-3');
+
+      &-title {
+        @include step(3);
+      }
+
+      &+ .c-form__section {
+        border-top: 2px solid color('white');
+      }
+    }
+  }
+
+  // .c-label
+  .c-label {
+    
+    &--required::after {
+      content: "*";
+      color: color('red');
+      padding: 0 2px;
+      position: relative;
+      top: -2px;
+    }
+  }
+
+  // .c-input
+  .c-input {
+    &__wrap {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--space-s);
+
+      .c-label {
+        @include margin-bottom(0);
+        flex-basis: 148px;
+
+        &+ * {
+          flex-grow: 1;
+          flex-shrink: 0;
+          flex-basis: 148px;
+        }
+      }
+
+      &--messages {
+        @include margin-top(0);
+        row-gap: 0;
+
+        p {
+          @include margin-top('2xs');
+          @include step(-1);
+        }
+      }
+    }
+
+    &__spacer {
+      height: 0;
+      flex-basis: 148px;
+    }
+
+    &--select {
+      cursor: pointer;
+    }
+  }
+
+  // .c-checkbox
+  // .c-radio
+  .c-checkbox,
+  .c-radio {
+    &+ label {
+      display: inline-block;
+    }
+  }
+}

package/src/_includes/components/dynamic-form/macro.njk

@@ -0,0 +1,5 @@
+{% from "components/component/component.njk" import c %}
+
+{% macro dynamicForm(params) %}
+  {{ c({ name: 'dynamic-form' }, params) }}
+{% endmacro %}

package/src/_includes/components/header/header.config.js

@@ -3,6 +3,36 @@ module.exports = {
   component: {
     name: 'header',
   },
+  context: {
+    navLeft: [
+      "Products", "Solutions", "Webinars and events", "Resources", "Support & downloads"
+    ],
+    navRight: ["Log in", "Register"],
+  },
+  variants: [
+    {
+      title: 'Blog',
+      context: {
+        siteNav: "blog",
+        navLeft: [
+          "Blog home", "About", "Categories", "Feedback"
+        ],
+        withHome: true
+      }
+    },
+    {
+      title: 'Store',
+      context: {
+        siteNav: "store",
+        navLeft: [
+          "Store home", "Consumables", "Standards", "Accessories", "Contracts and agreements", "Software"
+        ],
+        navRight: ["Log in", "Register"],
+        button: "Basket (0)",
+        withHome: true
+      }
+    },
+  ],
   figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=66%3A150',
   docs: true
 }

package/src/_includes/components/header/header.njk

@@ -86,11 +86,26 @@
         </div>
       </form>
       
+      {#
       {% set siteNav = params.siteNav %}
       {% if not siteNav %}
         {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
       {% endif %}
       {{ siteNav | safe }}
+      #}
+
+      {% if params.siteNav == 'blog' %}
+        {% include 'navigation/blog.njk' %}
+      {% elseif params.siteNav == 'store' %}
+        {% include 'navigation/store.njk' %}
+      {% else %}
+        {% set siteNav = params.siteNav %}
+        {% if not siteNav %}
+          {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
+        {% endif %}
+        {{ siteNav | safe }}
+      {% endif %}
+
     </nav>
   </div>
 </header>