@madgex/design-system 3.4.2 → 3.6.0

package/src/components/pagination-numbers/pagination-numbers.njk

@@ -4,20 +4,12 @@
   name: name,
   classes: classes,
   hideIcons: hideIcons,
-
-  prevLabel: prevLabel,
-  prevVisHiddenLabel: prevVisHiddenLabel,
-
-  nextLabel: nextLabel,
-  nextVisHiddenLabel: nextVisHiddenLabel,
-
-  pageVisHiddenLabel:pageVisHiddenLabel,
-  pageVisHiddenCurrentPageLabel:pageVisHiddenCurrentPageLabel,
   pageUrlTemplate:pageUrlTemplate,
   pageVisHiddenLabel: pageVisHiddenLabel,
   pageNo: pageNo,
   pageSize: pageSize,
   totalItemCount: totalItemCount,
   alwaysShowLastPage: alwaysShowLastPage,
-  id: id
+  id: id,
+  i18n: i18n
 }) }}

package/src/components/skip-link/README.md

@@ -6,6 +6,6 @@ The skip link component is visually hidden until a keyboard press activates it.
 
 ## Parameters
 
-- `text`: Text of the link, e.g: Skip to main content - **required**,
 - `href`: id of the anchor - **required**,
+- `i18n.text`: Text of the link, e.g: Skip to main content -  **optional**,
 - `accessKey`: default is 'S' but you can specify another key if you'd like - **optional**,

package/src/components/skip-link/_template.njk

@@ -1,3 +1,3 @@
 <div class="mds-skip-to-content">
-  <a class="mds-skip-to-content__link" accesskey="{{ params.accessKey | default('S')}}" title="Access key: {{ params.accessKey | default('S')}}" href="{{ params.href }}">{{ params.text }}</a>
+  <a class="mds-skip-to-content__link" accesskey="{{ params.accessKey | default('S')}}" title="Access key: {{ params.accessKey | default('S')}}" href="{{ params.href }}">{{ params.i18n.text | default('Skip to main content') }}</a>
 </div>

package/src/components/skip-link/skip-link.njk

@@ -3,7 +3,9 @@
 <p>To view the skip link component tab to this example, or click inside this example and press tab.</p>
 
 {{ MdsSkipLink({
-  text: "Skip to main content",
+  i18n: {
+    text: "Skip to main content"
+  },
   href: "#main"
 }) }}
 

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));
           });
         })