mp-design-system 1.2.1 → 1.2.3

package/package.json

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

package/src/_includes/components/input/radio.scss

@@ -7,6 +7,8 @@
     @include padding-left('l');
     position: relative;
     @include step(-1);
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
 
     &:before {
       transform: translateY(-50%);
@@ -92,11 +94,9 @@
   }
 }
 
-.c-off-canvas {
-  .c-checkbox-group {
-    &> * {
-      width: 100%;
-      margin-left: 0;
-    }
+.c-off-canvas .c-checkbox-group {
+  &> * {
+    width: 100%;
+    margin-left: 0;
   }
 }

package/src/_includes/components/off-canvas/off-canvas.njk

@@ -7,10 +7,10 @@
 {% endif %}
 
 <div>
-  <div id="{{ params.target.id }}" class="u-flow--m">
+  <div id="{{ params.target.id }}" class="c-checkbox-group u-flow--m">
     <label class="c-label" data-off-canvas="header">{{ params.header }}</label>
-    <div class="o-grid o-grid--of-three c-checkbox-group" data-off-canvas="main">
-      {% 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"] %}
+    <div class="o-grid o-grid--of-three" data-off-canvas="main">
+      {% 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"] %}
         <div>
           {{ checkbox({
             label: _,
@@ -21,7 +21,7 @@
         </div>
       {% endfor %}
     </div>
-    <button class="mp c-button o-off-canvas__update" data-off-canvas="footer" data-off-canvas-close="true">{{ params.target.button.text }}</button>
+    <button class="mp c-button o-off-canvas__update" data-off-canvas="footer" data-off-canvas-close="true" onclick="return false">{{ params.target.button.text }}</button>
   </div>
 
   <button class="{{ classNames }}" data-target="{{ params.target.id }}" aria-controls="{{ params.target.id }}" aria-expanded="false" aria-label="Toggle {{ params.header }}" onclick="return false">{{ params.toggle.text }}</button>

package/src/_includes/components/off-canvas/off-canvas.scss

@@ -92,4 +92,11 @@
   .c-off-canvas--mobile {
     display: none !important;
   }
+
+  .c-checkbox-group {
+    [data-off-canvas="header"],
+    [data-off-canvas="footer"] {
+      display: none;
+    }
+  }
 }

package/src/assets/js/imports/off-canvas.js

@@ -77,7 +77,7 @@ function createOffCanvas(target) {
       <main class="c-off-canvas__main">${targetMainContent}</main>
       <footer class="c-off-canvas__footer">
         ${targetFooterContent}
-        <button class="mp c-twi c-twi--left c-off-canvas__close" data-off-canvas-close="true">
+        <button class="mp c-twi c-twi--left c-off-canvas__close" data-off-canvas-close="true" onclick="return false">
           <span>Cancel</span>
           <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--cross">
             <use xlink:href="/static/svg/sprite.svg#cross"></use>