@madgex/design-system 3.4.2 → 3.5.0

package/docs/tokens/icons.njk

@@ -9,7 +9,7 @@ All icons available in MDS
 {% macro Icon(params) %}
 <div class="icon">
   <svg class="mds-icon mds-icon--{{ params.name }}{% if class %} {{ class }}{% endif %}">
-    <use href="{{ '/assets/icons.svg' | path }}#{{ params.name }}" />
+    <use href="{{ '/assets/icons.svg' | path }}#icon-{{ params.name }}" />
   </svg>
   <span class="icon__label"><code>mds-icon--{{ params.name }}</code></span>
 </div>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -97,7 +97,7 @@
     "sass": "^1.35.2",
     "semantic-release": "^15.13.24",
     "svg-sprite-loader": "^6.0.9",
-    "svgo": "^2.3.1",
+    "svgo": "^2.8.0",
     "svgo-loader": "^3.0.0",
     "svgstore": "^3.0.0-2",
     "vue-jest": "^3.0.7",

package/src/components/icons/README.md

@@ -1,17 +1,21 @@
+## Setup
+
+**Default path of the icons file**:
+
+You need to set `defaultIconPath` as a Nunjucks global if you want to use an external file (for example, `/assets/icons/svg`).
+https://mozilla.github.io/nunjucks/api.html#addglobal
+
+If you prefer using inline svgs, don't set the path and include the file `icons-inline.svg` in your template instead.
+
 ## Parameters
 
 - `iconName`: the name of the icon you want to use
 - `classes`: add extra CSS classes to the icon
-- `path`: if you need to use a different path than the default (*/assets/icons.svg*)
+- `path`: if you need to use a different path than your default
 - `visuallyHiddenLabel`: add a visually hidden label (see Accessibility notes below)
 - `hasContainer`: `true/false` - used to add a container arount the icon *optional*
 - `containerClasses`: classes for the container (see Container notes below)
 
-**Note regarding the default path of the icons file**:
-If you would like to change the default path, you can use the `defaultIconPath` variable in Nunjucks. You can set it as global variable like this:
-
-`env.addGlobal('defaultIconPath', value)`
-
 ## Accessibility
 
 The SVGs are hidden from screen readers by default (with the use of `aria-hidden=true` and `focusable=false`). When the icons are used without a visible label, a **visually hidden label needs to be added** instead.

package/src/components/icons/_template.njk

@@ -1,15 +1,8 @@
-{%- set iconPath -%}
-  {%- if defaultIconPath -%}
-    {{- defaultIconPath -}}
-  {%- else -%}
-    '/assets/icons.svg'
-  {%- endif -%}
-{%- endset -%}
 {%- if params.hasContainer -%}
   <span class="mds-icon-container {{ params.containerClasses }}">
 {%- endif -%}
   <svg aria-hidden="true" focusable="false" class="mds-icon mds-icon--{{ params.iconName }}{% if params.classes %} {{ params.classes }}{% endif %}">
-    <use href="{{ params.path | default(iconPath) }}#{{ params.iconName }}" />
+    <use href="{{ params.path | default(defaultIconPath) }}#icon-{{ params.iconName }}" />
   </svg>
   {%- if params.visuallyHiddenLabel %}
     <span class="mds-visually-hidden">{{ params.visuallyHiddenLabel }}</span>

package/src/components/inputs/combobox/vue-components/ListBox.vue

@@ -4,7 +4,7 @@
       <!-- Ideally we would pass this in as a slot in the custom element with MdsIcon, but something is borked
       with passing slots in Chrome https://github.com/karol-f/vue-custom-element/issues/162 -->
       <svg aria-hidden="true" focusable="true" class="mds-icon mds-icon--spinner mds-icon--after">
-        <use :href="`${iconPath}#spinner`" />
+        <use :href="`${iconPath}#icon-spinner`" />
       </svg>
       <span class="mds-visually-hidden">Loading...</span>
     </li>

package/src/icons/check.svg

@@ -1 +1 @@
-<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg"><path d="M26.18 9.546a1.205 1.205 0 00-1.628.255L13.636 24.296l-3.644-3.473a1.207 1.207 0 00-1.127-.288 1.14 1.14 0 00-.825.786c-.108.383.007.792.301 1.073l4.617 4.396c.245.224.58.338.918.312.34-.027.65-.19.854-.45l11.718-15.556a1.078 1.078 0 00-.268-1.55z" fill="#FFF" fill-rule="nonzero"/></svg>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path d="M26.18 9.546a1.205 1.205 0 00-1.628.255L13.636 24.296l-3.644-3.473a1.207 1.207 0 00-1.127-.288 1.14 1.14 0 00-.825.786c-.108.383.007.792.301 1.073l4.617 4.396c.245.224.58.338.918.312.34-.027.65-.19.854-.45l11.718-15.556a1.078 1.078 0 00-.268-1.55z" fill="#FFF" fill-rule="nonzero"/></svg>

package/src/icons/question-mark.svg

@@ -1,3 +1,3 @@
-<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <path fill="#000" fill-rule="evenodd" d="M16 0c2.9027923 0 5.5798489.71527063 8.03125 2.14583333 2.4514011 1.43056271 4.392354 3.37498771 5.8229167 5.83333334C31.2847294 10.4236233 32 13.0972077 32 16c0 2.9027923-.7152706 5.5798489-2.1458333 8.03125s-3.3715156 4.392354-5.8229167 5.8229167C21.5798489 31.2847294 18.9027923 32 16 32c-2.9027923 0-5.5798489-.7152706-8.03125-2.1458333-2.45140115-1.4305627-4.39235396-3.3715156-5.82291667-5.8229167C.71527063 21.5798489 0 18.9027923 0 16c0-2.9027923.71527063-5.5798489 2.14583333-8.03125C3.57639604 5.51734885 5.51734885 3.57639604 7.96875 2.14583333 10.4201511.71527063 13.0972077 0 16 0zm2 21.3333333h-4c-.1944454 0-.354166.0624994-.4791667.1875-.1250006.1250007-.1875.2847213-.1875.4791667v4c0 .1944454.0624994.354166.1875.4791667.1250007.1250006.2847213.1875.4791667.1875h4c.1944454 0 .354166-.0624994.4791667-.1875.1250006-.1250007.1875-.2847213.1875-.4791667v-4c0-.1944454-.0624994-.354166-.1875-.4791667-.1250007-.1250006-.2847213-.1875-.4791667-.1875zM16.4166667 5.33333333c-3.3750169 0-5.95138 1.47915188-7.7291667 4.4375-.20833438.33333497-.15277938.62499877.16666667.87499997l2.75000003 2.0833334c.0972227.0833337.2291658.125.3958333.125.2222233 0 .3958327-.0833325.5208333-.25.7361148-.9444492 1.3333311-1.5833317 1.7916667-1.9166667.4722246-.333335 1.0694408-.5 1.7916667-.5.66667 0 1.260414.1805537 1.78125.5416667.5208359.3611129.78125.770831.78125 1.2291666 0 .5277804-.1388875.9513873-.4166667 1.2708334-.2777792.319446-.7499967.6319429-1.4166667.9375-.8750043.3888908-1.6770797.9895792-2.40625 1.8020833-.7291703.8125041-1.09375 1.6840231-1.09375 2.6145833v.75c0 .1944454.0624994.3541661.1875.4791667C13.645834 19.9375006 13.8055546 20 14 20h4c.1944454 0 .354166-.0624994.4791667-.1875.1250006-.1250006.1875-.2847213.1875-.4791667 0-.2638902.149304-.6076367.4479166-1.03125.2986126-.4236132.6770811-.7673598 1.1354167-1.03125.4444467-.2500012.784721-.4479159 1.0208333-.59375.2361123-.145834.5555536-.3888872.9583334-.7291666.4027798-.3402795.7118044-.6736095.9270833-1 .2152789-.3263906.4097214-.7465252.5833333-1.2604167C23.9131953 13.1736085 24 12.6111142 24 12c0-1.2222283-.3854128-2.35416146-1.15625-3.39583333-.7708372-1.04167188-1.7326331-1.84721938-2.8854167-2.41666667-1.1527835-.56944729-2.3333273-.85416667-3.5416666-.85416667z" id="a"/>
 </svg>

package/tasks/svgsprite.js

@@ -5,25 +5,21 @@ const svgstore = require('svgstore');
 
 const filepath = path.resolve(__dirname, '../src/icons/');
 const prefix = path.basename(filepath, path.extname(filepath));
+
 const svgoOptions = {
   plugins: [
     {
-      name: 'cleanupIDs',
+      name: 'preset-default',
       params: {
-        prefix: `${prefix}-`,
-        minify: true,
+        overrides: {
+          cleanupIDs: {
+            prefix: `${prefix}-`,
+            minify: true,
+          },
+          removeViewBox: false,
+        },
       },
     },
-    { name: 'removeDoctype', params: true },
-    { name: 'removeComments', params: true },
-    { name: 'removeTitle', params: true },
-    { name: 'removeDesc', params: true },
-    { name: 'removeUselessDefs', params: true },
-    { name: 'removeEditorsNSData', params: true },
-    { name: 'cleanupAttrs', params: true },
-    { name: 'cleanupNumericValues', params: true },
-    { name: 'removeViewBox', params: false },
-    { name: 'removeDimensions', params: true },
     {
       name: 'removeAttrs',
       params: {
@@ -36,6 +32,13 @@ const svgoOptions = {
 let files = [];
 const icons = [];
 const sprites = svgstore();
+const inlineSprites = svgstore({
+  inline: true,
+  svgAttrs: {
+    id: 'spritesheet',
+    style: 'display: none',
+  },
+});
 
 async function createSvgStack() {
   return new Promise((resolve, reject) => {
@@ -53,12 +56,15 @@ async function createSvgStack() {
       })
         .then((icon) => {
           const fileName = path.parse(file).name;
+          const prefixedName = `icon-${fileName}`;
 
-          sprites.add(fileName, icon.data);
+          sprites.add(prefixedName, icon.data);
+          inlineSprites.add(prefixedName, icon.data);
 
           return fs.mkdir(path.resolve(__dirname, '../dist/assets'), { recursive: true }, async () => {
             icons.push({ name: fileName });
             fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.svg')}`, sprites);
+            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons-inline.svg')}`, inlineSprites);
             fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.json')}`, JSON.stringify(icons));
           });
         })