@madgex/design-system 1.29.0 → 1.30.0

package/coverage/index.html

@@ -20,24 +20,24 @@
     </h1>
     <div class='clearfix'>
       <div class='fl pad1y space-right2'>
-        <span class="strong">28.79% </span>
+        <span class="strong">37.28% </span>
         <span class="quiet">Statements</span>
-        <span class='fraction'>57/198</span>
+        <span class='fraction'>85/228</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">19.15% </span>
+        <span class="strong">31.03% </span>
         <span class="quiet">Branches</span>
-        <span class='fraction'>9/47</span>
+        <span class='fraction'>18/58</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">14.63% </span>
+        <span class="strong">25% </span>
         <span class="quiet">Functions</span>
-        <span class='fraction'>6/41</span>
+        <span class='fraction'>12/48</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">28.93% </span>
+        <span class="strong">37.44% </span>
         <span class="quiet">Lines</span>
-        <span class='fraction'>57/197</span>
+        <span class='fraction'>85/227</span>
       </div>
     </div>
     <p class="quiet">
@@ -74,6 +74,19 @@
 	<td data-value="70" class="abs medium">52/70</td>
 	</tr>
 
+<tr>
+	<td class="file high" data-value="components/popover"><a href="components/popover/index.html">components/popover</a></td>
+	<td data-value="96.55" class="pic high"><div class="chart"><div class="cover-fill" style="width: 96%;"></div><div class="cover-empty" style="width:4%;"></div></div></td>
+	<td data-value="96.55" class="pct high">96.55%</td>
+	<td data-value="29" class="abs high">28/29</td>
+	<td data-value="81.82" class="pct high">81.82%</td>
+	<td data-value="11" class="abs high">9/11</td>
+	<td data-value="85.71" class="pct high">85.71%</td>
+	<td data-value="7" class="abs high">6/7</td>
+	<td data-value="96.55" class="pct high">96.55%</td>
+	<td data-value="29" class="abs high">28/29</td>
+	</tr>
+
 <tr>
 	<td class="file high" data-value="components/switch-state"><a href="components/switch-state/index.html">components/switch-state</a></td>
 	<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
@@ -104,13 +117,13 @@
 	<td class="file low" data-value="js"><a href="js/index.html">js</a></td>
 	<td data-value="0" class="pic low"><div class="chart"><div class="cover-fill" style="width: 0%;"></div><div class="cover-empty" style="width:100%;"></div></div></td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="10" class="abs low">0/10</td>
+	<td data-value="11" class="abs low">0/11</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="0" class="abs high">0/0</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="4" class="abs low">0/4</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="10" class="abs low">0/10</td>
+	<td data-value="11" class="abs low">0/11</td>
 	</tr>
 
 <tr>
@@ -158,7 +171,7 @@
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="prettify.js"></script>

package/coverage/js/common.js.html

@@ -88,7 +88,7 @@
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../prettify.js"></script>

package/coverage/js/fractal-scripts/index.html

@@ -80,7 +80,7 @@
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../../prettify.js"></script>

package/coverage/js/fractal-scripts/switch-state.js.html

@@ -105,12 +105,12 @@ const switchStateScript = <span class="cstat-no" title="statement not covered" >
 <span class="cstat-no" title="statement not covered" >        e.preventDefault();</span>
 <span class="cstat-no" title="statement not covered" >        e.stopPropagation();</span>
         const triggerEl = <span class="cstat-no" title="statement not covered" >e.currentTarget;</span>
-<span class="cstat-no" title="statement not covered" >        if (triggerEl.classList.contains('mds-switch-state--inactive')) {</span>
-<span class="cstat-no" title="statement not covered" >          switchState.switchToActive(triggerEl);</span>
-        } else <span class="cstat-no" title="statement not covered" >if (triggerEl.classList.contains('mds-switch-state--active')) {</span>
-<span class="cstat-no" title="statement not covered" >          switchState.switchToInactive(triggerEl);</span>
+<span class="cstat-no" title="statement not covered" >        if (triggerEl.classList.contains('mds-switch-state--default')) {</span>
+<span class="cstat-no" title="statement not covered" >          switchState.switchToinverse(triggerEl);</span>
+        } else <span class="cstat-no" title="statement not covered" >if (triggerEl.classList.contains('mds-switch-state--inverse')) {</span>
+<span class="cstat-no" title="statement not covered" >          switchState.switchTodefault(triggerEl);</span>
         } else {
-<span class="cstat-no" title="statement not covered" >          switchState.switchToInactive(triggerEl);</span>
+<span class="cstat-no" title="statement not covered" >          switchState.switchTodefault(triggerEl);</span>
         }
       });
     });
@@ -124,7 +124,7 @@ export default switchStateScript;
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../../prettify.js"></script>

package/coverage/js/index-fractal.js.html

@@ -67,7 +67,7 @@
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../prettify.js"></script>

package/coverage/js/index-polyfills.js.html

@@ -58,7 +58,7 @@ import './polyfills/closest';
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../prettify.js"></script>

package/coverage/js/index.html

@@ -22,7 +22,7 @@
       <div class='fl pad1y space-right2'>
         <span class="strong">0% </span>
         <span class="quiet">Statements</span>
-        <span class='fraction'>0/10</span>
+        <span class='fraction'>0/11</span>
       </div>
       <div class='fl pad1y space-right2'>
         <span class="strong">100% </span>
@@ -37,7 +37,7 @@
       <div class='fl pad1y space-right2'>
         <span class="strong">0% </span>
         <span class="quiet">Lines</span>
-        <span class='fraction'>0/10</span>
+        <span class='fraction'>0/11</span>
       </div>
     </div>
     <p class="quiet">
@@ -104,13 +104,13 @@
 	<td class="file low" data-value="index.js"><a href="index.js.html">index.js</a></td>
 	<td data-value="0" class="pic low"><div class="chart"><div class="cover-fill" style="width: 0%;"></div><div class="cover-empty" style="width:100%;"></div></div></td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="3" class="abs low">0/3</td>
+	<td data-value="4" class="abs low">0/4</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="0" class="abs high">0/0</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="1" class="abs low">0/1</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="3" class="abs low">0/3</td>
+	<td data-value="4" class="abs low">0/4</td>
 	</tr>
 
 </tbody>
@@ -119,7 +119,7 @@
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../prettify.js"></script>

package/coverage/js/index.js.html

@@ -22,7 +22,7 @@
       <div class='fl pad1y space-right2'>
         <span class="strong">0% </span>
         <span class="quiet">Statements</span>
-        <span class='fraction'>0/3</span>
+        <span class='fraction'>0/4</span>
       </div>
       <div class='fl pad1y space-right2'>
         <span class="strong">100% </span>
@@ -37,7 +37,7 @@
       <div class='fl pad1y space-right2'>
         <span class="strong">0% </span>
         <span class="quiet">Lines</span>
-        <span class='fraction'>0/3</span>
+        <span class='fraction'>0/4</span>
       </div>
     </div>
     <p class="quiet">
@@ -64,7 +64,9 @@
 <a name='L16'></a><a href='#L16'>16</a>
 <a name='L17'></a><a href='#L17'>17</a>
 <a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -78,6 +80,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -95,10 +99,12 @@ import './common';
 &nbsp;
 import tabs from '../components/tabs/tabs';
 import accordion from '../components/accordion/accordion';
+import popovers from '../components/popover/popover';
 &nbsp;
 <span class="cstat-no" title="statement not covered" >document.addEventListener('DOMContentLoaded', <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >  tabs.init();</span>
 <span class="cstat-no" title="statement not covered" >  accordion.init();</span>
+<span class="cstat-no" title="statement not covered" >  popovers.init();</span>
 });
 &nbsp;</pre></td></tr>
 </table></pre>
@@ -106,7 +112,7 @@ import accordion from '../components/accordion/accordion';
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../prettify.js"></script>

package/coverage/js/polyfills/closest.js.html

@@ -100,7 +100,7 @@
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../../prettify.js"></script>

package/coverage/js/polyfills/index.html

@@ -80,7 +80,7 @@
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../../prettify.js"></script>

package/coverage/tokens/_config.js.html

@@ -541,7 +541,7 @@ const config = <span class="cstat-no" title="statement not covered" >{</span>
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../prettify.js"></script>

package/coverage/tokens/index.html

@@ -80,7 +80,7 @@
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Thu Nov 21 2019 17:27:46 GMT+0000 (GMT)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 29 2019 11:47:59 GMT+0000 (GMT)
 </div>
 </div>
 <script src="../prettify.js"></script>

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Nov 2019 17:28:08 GMT
+ * Generated on Fri, 29 Nov 2019 11:48:27 GMT
  */
 
 :root {
@@ -9,11 +9,11 @@
  --mds-color-brand-1-dark: #15598e;
  --mds-color-brand-1-darkest: #082135;
  --mds-color-brand-1-base: #1b75bb;
- --mds-color-brand-2-light: #f3c03f;
- --mds-color-brand-2-lightest: #fdf7e7;
- --mds-color-brand-2-dark: #c28d0c;
- --mds-color-brand-2-darkest: #3a2a04;
- --mds-color-brand-2-base: #f0af11;
+ --mds-color-brand-2-light: #fb9950;
+ --mds-color-brand-2-lightest: #fef0e6;
+ --mds-color-brand-2-dark: #e06305;
+ --mds-color-brand-2-darkest: #3c1a01;
+ --mds-color-brand-2-base: #fa7c1e;
  --mds-color-brand-3-light: #24e6d7;
  --mds-color-brand-3-lightest: #e8fcfb;
  --mds-color-brand-3-dark: #119389;
@@ -47,12 +47,13 @@
  --mds-color-text-invert: #ffffff;
  --mds-color-text-headers: #222222;
  --mds-color-border: #dddddd;
- --mds-color-button-bg-base: #f0af11;
- --mds-color-button-bg-hover: #f3c03f;
- --mds-color-button-text-base: #000000;
- --mds-color-button-text-hover: #000000;
+ --mds-color-button-bg-base: #fa7c1e;
+ --mds-color-button-bg-hover: #fb9950;
+ --mds-color-button-text-base: #ffffff;
+ --mds-color-button-text-hover: #ffffff;
  --mds-color-link-base: #1b75bb;
  --mds-color-link-hover: #15598e;
+ --mds-color-box-shadow-base: 0 2px 5px 0 #dddddd;
  --mds-font-family-base: "Helvetica", Arial, sans-serif;
  --mds-font-family-heading-1: "Helvetica", Arial, sans-serif;
  --mds-font-family-heading-2: "Helvetica", Arial, sans-serif;

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Nov 2019 17:28:08 GMT
+ * Generated on Fri, 29 Nov 2019 11:48:27 GMT
  */
 
 module.exports = {
@@ -105,9 +105,9 @@ module.exports = {
       },
       "2": {
         "light": {
-          "value": "#f3c03f",
+          "value": "#fb9950",
           "original": {
-            "value": "#f3c03f"
+            "value": "#fb9950"
           },
           "name": "MdsColorBrand2Light",
           "attributes": {
@@ -124,9 +124,9 @@ module.exports = {
           ]
         },
         "lightest": {
-          "value": "#fdf7e7",
+          "value": "#fef0e6",
           "original": {
-            "value": "#fdf7e7"
+            "value": "#fef0e6"
           },
           "name": "MdsColorBrand2Lightest",
           "attributes": {
@@ -143,9 +143,9 @@ module.exports = {
           ]
         },
         "dark": {
-          "value": "#c28d0c",
+          "value": "#e06305",
           "original": {
-            "value": "#c28d0c"
+            "value": "#e06305"
           },
           "name": "MdsColorBrand2Dark",
           "attributes": {
@@ -162,9 +162,9 @@ module.exports = {
           ]
         },
         "darkest": {
-          "value": "#3a2a04",
+          "value": "#3c1a01",
           "original": {
-            "value": "#3a2a04"
+            "value": "#3c1a01"
           },
           "name": "MdsColorBrand2Darkest",
           "attributes": {
@@ -181,9 +181,9 @@ module.exports = {
           ]
         },
         "base": {
-          "value": "#f0af11",
+          "value": "#fa7c1e",
           "original": {
-            "value": "#f0af11"
+            "value": "#FA7C1E"
           },
           "name": "MdsColorBrand2Base",
           "attributes": {
@@ -819,7 +819,7 @@ module.exports = {
     "button": {
       "bg": {
         "base": {
-          "value": "#f0af11",
+          "value": "#fa7c1e",
           "original": {
             "value": "{color.brand.2.base.value}"
           },
@@ -838,7 +838,7 @@ module.exports = {
           ]
         },
         "hover": {
-          "value": "#f3c03f",
+          "value": "#fb9950",
           "original": {
             "value": "{color.brand.2.light.value}"
           },
@@ -859,9 +859,9 @@ module.exports = {
       },
       "text": {
         "base": {
-          "value": "#000000",
+          "value": "#ffffff",
           "original": {
-            "value": "#000"
+            "value": "#fff"
           },
           "name": "MdsColorButtonTextBase",
           "attributes": {
@@ -878,7 +878,7 @@ module.exports = {
           ]
         },
         "hover": {
-          "value": "#000000",
+          "value": "#ffffff",
           "original": {
             "value": "{color.button.text.base.value}"
           },
@@ -933,6 +933,25 @@ module.exports = {
           "hover"
         ]
       }
+    },
+    "box-shadow": {
+      "base": {
+        "value": "0 2px 5px 0 #dddddd",
+        "original": {
+          "value": "0 2px 5px 0 {color.neutral.lighter.value}"
+        },
+        "name": "MdsColorBoxShadowBase",
+        "attributes": {
+          "category": "color",
+          "type": "box-shadow",
+          "item": "base"
+        },
+        "path": [
+          "color",
+          "box-shadow",
+          "base"
+        ]
+      }
     }
   },
   "font": {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Thu, 21 Nov 2019 17:28:08 GMT
+  Generated on Fri, 29 Nov 2019 11:48:27 GMT
 */
 
 $mds-color-brand-1-light: #2990e0 !default;
@@ -9,11 +9,11 @@ $mds-color-brand-1-lightest: #e9f3fc !default;
 $mds-color-brand-1-dark: #15598e !default;
 $mds-color-brand-1-darkest: #082135 !default;
 $mds-color-brand-1-base: #1b75bb !default;
-$mds-color-brand-2-light: #f3c03f !default;
-$mds-color-brand-2-lightest: #fdf7e7 !default;
-$mds-color-brand-2-dark: #c28d0c !default;
-$mds-color-brand-2-darkest: #3a2a04 !default;
-$mds-color-brand-2-base: #f0af11 !default;
+$mds-color-brand-2-light: #fb9950 !default;
+$mds-color-brand-2-lightest: #fef0e6 !default;
+$mds-color-brand-2-dark: #e06305 !default;
+$mds-color-brand-2-darkest: #3c1a01 !default;
+$mds-color-brand-2-base: #fa7c1e !default;
 $mds-color-brand-3-light: #24e6d7 !default;
 $mds-color-brand-3-lightest: #e8fcfb !default;
 $mds-color-brand-3-dark: #119389 !default;
@@ -47,12 +47,13 @@ $mds-color-text-base: #343433 !default;
 $mds-color-text-invert: #ffffff !default;
 $mds-color-text-headers: #222222 !default;
 $mds-color-border: #dddddd !default;
-$mds-color-button-bg-base: #f0af11 !default;
-$mds-color-button-bg-hover: #f3c03f !default;
-$mds-color-button-text-base: #000000 !default;
-$mds-color-button-text-hover: #000000 !default;
+$mds-color-button-bg-base: #fa7c1e !default;
+$mds-color-button-bg-hover: #fb9950 !default;
+$mds-color-button-text-base: #ffffff !default;
+$mds-color-button-text-hover: #ffffff !default;
 $mds-color-link-base: #1b75bb !default;
 $mds-color-link-hover: #15598e !default;
+$mds-color-box-shadow-base: 0 2px 5px 0 #dddddd !default;
 $mds-font-family-base: "Helvetica", Arial, sans-serif !default;
 $mds-font-family-heading-1: "Helvetica", Arial, sans-serif !default;
 $mds-font-family-heading-2: "Helvetica", Arial, sans-serif !default;
@@ -248,6 +249,9 @@ $tokens: (
     'link': (
       'base': $mds-color-link-base,
       'hover': $mds-color-link-hover
+    ),
+    'box-shadow': (
+      'base': $mds-color-box-shadow-base
     )
   ),
   'font': (