@madgex/design-system 1.65.8 → 1.65.9

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.65.8",
+  "version": "1.65.9",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/icons/README.md

@@ -26,6 +26,8 @@ We also have 3 fixed sizes:
 - `.mds-icon--sm` : 16px
 - `.mds-icon--md` : 24px
 - `.mds-icon--lg` : 32px
+- `.mds-icon--xl` : 48px
+- `.mds-icon--xxl` : 72px
 
 ## Next to text
 

package/src/components/icons/icons.njk

@@ -15,6 +15,14 @@
   iconName: 'star-fill',
   classes: 'mds-icon--lg'
 }) }} : large (32px)</p>
+<p>{{ MdsIcon({
+  iconName: 'star-fill',
+  classes: 'mds-icon--xl'
+}) }} : extra large (48px)</p>
+<p>{{ MdsIcon({
+  iconName: 'star-fill',
+  classes: 'mds-icon--xxl'
+}) }} : extra extra large (72px)</p>
 
 <br><hr><br>
 

package/src/components/icons/icons.scss

@@ -63,6 +63,16 @@
   height: $mds-size-icon-lg;
 }
 
+.mds-icon--xl {
+  width: $mds-size-icon-xl;
+  height: $mds-size-icon-xl;
+}
+
+.mds-icon--xxl {
+  width: $mds-size-icon-xxl;
+  height: $mds-size-icon-xxl;
+}
+
 .mds-icon--spinner {
   animation: spin 900ms cubic-bezier(0.21, 0, 1, 1) infinite;
 }

package/src/icons/external.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="32px" viewBox="0 0 30 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon / Link / External</title>
+    <g id="Icon-/-Link-/-External" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M28.5936,14.125 C28.21509,14.125 27.87759,13.971484 27.62211,13.73125 C27.6150786,13.7242186 27.60336,13.7242186 27.5963286,13.7160157 L24.1007286,10.2180157 L15.2507286,19.0680157 C14.3354886,19.9797457 12.8507286,19.9797457 11.9354286,19.0680157 C11.0201886,18.1527757 11.0201886,16.6680157 11.9354286,15.7527157 L20.7818286,6.9063157 L17.2838286,3.4035157 C17.2756257,3.3964843 17.2756257,3.3847657 17.2685943,3.3777343 C17.0283603,3.1222663 16.8748443,2.7847543 16.8748443,2.4062443 C16.8748443,1.6304743 17.5053243,0.9999943 18.2810943,0.9999943 L28.1246943,0.9999943 C29.1594543,0.9999943 29.9996943,1.8402343 29.9996943,2.8749943 L29.9996943,12.7185943 C29.9996943,13.4943643 29.3692143,14.1248443 28.5934443,14.1248443 L28.5936,14.125 Z M3.75,9.4375 L3.75,26.3125 C3.75,26.83048 4.16952,27.25 4.6875,27.25 L21.5625,27.25 C22.08048,27.25 22.5,26.83048 22.5,26.3125 L22.5,16 L26.25,19.75 L26.25,27.25 C26.25,29.32423 24.57423,31 22.5,31 L3.75,31 C1.68048,31 2.77111667e-13,29.32423 2.77111667e-13,27.25 L2.77111667e-13,8.5 C2.77111667e-13,6.43048 1.68048,4.75 3.75,4.75 L11.25,4.75 L15,8.5 L4.6875,8.5 C4.16952,8.5 3.75,8.91952 3.75,9.4375 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/tokens/size.json

@@ -65,7 +65,9 @@
       "default": { "value": "1em" },
       "sm": { "value": "16px" },
       "md": { "value": "24px" },
-      "lg": { "value": "32px" }
+      "lg": { "value": "32px" },
+      "xl": { "value": "48px" },
+      "xxl": { "value": "72px" }
     }
   }
 }