@madgex/design-system 13.7.0 → 13.8.0

package/dist/assets/icons.json

@@ -1 +1 @@
-[{"name":"add"},{"name":"arrow-left"},{"name":"arrow-right"},{"name":"asterisk"},{"name":"calendar"},{"name":"cart"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"remove"},{"name":"search"},{"name":"settings"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"triangle-down"},{"name":"triangle-right"},{"name":"triangle-up"},{"name":"undo"},{"name":"upload"},{"name":"user"}]
+[{"name":"add"},{"name":"arrow-left"},{"name":"arrow-right"},{"name":"asterisk"},{"name":"cart"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"calendar"},{"name":"list-numbers"},{"name":"list-bullets"},{"name":"location-pin"},{"name":"menu"},{"name":"plus-small"},{"name":"minus"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"search"},{"name":"remove"},{"name":"settings"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"triangle-down"},{"name":"triangle-right"},{"name":"triangle-up"},{"name":"undo"},{"name":"upload"},{"name":"user"},{"name":"text-underline"}]

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "13.7.0",
+  "version": "13.8.0",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",

package/src/components/inputs/_checkbox-elem/_template.njk

@@ -1,4 +1,5 @@
 {% from "../../icons/_macro.njk" import MdsIcon %}
+{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
 <input
   type="checkbox"
   class="{{ params.inputClass | default('mds-form-check__input') }}"
@@ -11,6 +12,7 @@
   value="{{ params.value }}"
   {% if params.dataPath %}data-path="{{ params.dataPath }}"{% endif %}
   {% if params.controls %}aria-controls="{{ params.controls }}"{% endif %}
+  {{- MdsAttributes(params.attributes) -}}
 />{%- if not params.inputOnly -%}{#
 #}<label class="mds-form-check__label" for="{{ params.id }}">{#
   #}{{- params.labelText | safe -}}{#

package/src/components/inputs/button-checkbox/_template.njk

@@ -37,7 +37,8 @@
       value: params.value,
       labelledBy: titleId + ' ' + priceId,
       describedBy: ariaDescribedBy,
-      controls: params.controls
+      controls: params.controls,
+      attributes: params.attributes
     }) -}}
     <span class="mds-button-checkbox__icon--add">{{- MdsIcon({ iconName: "add", classes: "mds-font-s2" }) -}}</span>
     <span class="mds-button-checkbox__icon--remove">{{- MdsIcon({ iconName: "remove", classes: "mds-font-s2" }) -}}</span>

package/src/components/inputs/button-checkbox/button-checkbox.njk

@@ -10,6 +10,7 @@
     helpText: helpText,
     value: value,
     i18n: i18n,
-    disabled: disabled
+    disabled: disabled,
+    attributes: attributes
   }) -}}
 </div>

package/src/components/inputs/combobox/_template.njk

@@ -1,5 +1,6 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
 {%- set comboboxId %}
 {%- if params.id -%}
@@ -68,6 +69,7 @@
       {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
       {% if ariaDescribedBy %} describedby-id="{{ariaDescribedBy}}"{% endif -%}
+      {{- MdsAttributes(params.attributes) -}}
       >
         <div class="mds-form-element__fallback">
           {% if params.fallbackTo === 'select' and params.options %}

package/src/components/inputs/combobox/combobox.njk

@@ -23,7 +23,8 @@
       apiUrl: apiUrl,
       apiQueryKey: apiQueryKey,
       apiOptionsPath: apiOptionsPath,
-      optionLabelPath: optionLabelPath
+      optionLabelPath: optionLabelPath,
+      attributes: attributes
     }) %}
       {# 
         The below demonstrates how a target input value can be set on option selection, or on clear of combobox

package/src/components/inputs/file-upload/_template.njk

@@ -4,6 +4,7 @@
 {% from "../../button/_macro.njk" import MdsButton %}
 {% from "../../modal/_macro.njk" import MdsModal %}
 {% from "../../image-cropper/_macro.njk" import MdsImageCropper %}
+{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
 {% if params.name %}
   {% set name = params.name %}
@@ -58,6 +59,7 @@
           {% if ariaDescribedBy %}
             aria-describedby="{{ariaDescribedBy}}"
           {% endif %}
+          {{- MdsAttributes(params.attributes) -}}
       />
     <div class="mds-file-upload__wrapper" aria-live="assertive" aria-atomic="true">
       {# NO FILE STATE #}

package/src/components/inputs/file-upload/file-upload.njk

@@ -21,7 +21,8 @@
         siteContainerId:siteContainerId, 
         noImageCropper: noImageCropper,
         noAutoOpenImageCropper: noAutoOpenImageCropper,
-        cropper: cropper
+        cropper: cropper,
+        attributes: attributes
       }) }}
     </div>
   </div>

package/src/components/inputs/input/_template.njk

@@ -1,5 +1,6 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
 {% if params.name %}
   {% set name = params.name %}
@@ -58,5 +59,6 @@
     {% if ariaDescribedBy %}
       aria-describedby="{{ariaDescribedBy}}"
     {% endif %}
+    {{- MdsAttributes(params.attributes) -}}
   />
 </div>

package/src/components/inputs/input/input.njk

@@ -18,7 +18,8 @@
         state: state,
         classes: classes,
         tooltipMessage: tooltipMessage,
-        autocompleteValue: autocompleteValue
+        autocompleteValue: autocompleteValue,
+        attributes: attributes
       }) }}
     </div>
   </div>

package/src/components/inputs/radio/_template.njk

@@ -1,5 +1,6 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
 {%- if params.name -%}
   {%- set name = params.name -%}
@@ -53,7 +54,8 @@
           id="{{optionId}}"
           {% if params.disabled %}disabled="disabled"{% endif %}
           {% if params.value == radio.value %}checked="checked"{% endif %}
-          value="{{radio.value}}"/>
+          value="{{radio.value}}"
+          {{- MdsAttributes(params.attributes) -}}/>
         {#
         # Avoid extra space created by line breaks #
         #}<label class="mds-form-check__label" for="{{optionId}}">{#

package/src/components/inputs/radio/radio.njk

@@ -10,6 +10,7 @@
     options: options,
     classes: classes,
     helpText: helpText,
-    validationError: validationError
+    validationError: validationError,
+    attributes: attributes
   }) }}
 </div>

package/src/components/inputs/select/_template.njk

@@ -1,5 +1,6 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
 {% if params.name %}
   {% set name = params.name %}
@@ -51,6 +52,7 @@
     {% if ariaDescribedBy %}
       aria-describedby="{{ariaDescribedBy}}"
     {% endif %}
+    {{- MdsAttributes(params.attributes) -}}
   >
     {% if not params.hideDefault -%}
       <option {%- if not params.value %} selected="selected"{% endif %} value="">

package/src/components/inputs/select/select.njk

@@ -20,7 +20,8 @@
         tooltipMessage: tooltipMessage,
         hideDefault: hideDefault,
         options: options,
-        i18n: i18n
+        i18n: i18n,
+        attributes: attributes
       }) }}
     </div>
   </div>

package/src/components/inputs/single-checkbox/_template.njk

@@ -54,7 +54,8 @@
       name: name,
       id: id,
       value: options.value,
-      i18n: params.i18n
+      i18n: params.i18n,
+      attributes: params.attributes
     }) -}}
     </div>
   </div>

package/src/components/inputs/single-checkbox/single-checkbox.config.js

@@ -42,6 +42,25 @@ module.exports = {
         ],
       },
     },
+    {
+      name: 'Checkbox with custom attributes',
+      context: {
+        id: 'custom-attrs',
+        optional: true,
+        options: [
+          {
+            labelText:
+              'This checkbox has custom <code>data-upsell</code> and <code>data-upsell-id</code> attributes on the input element.',
+            value: 'data-yes',
+            id: 'data-attrs',
+          },
+        ],
+        attributes: {
+          'data-upsell': '',
+          'data-upsell-id': '123',
+        },
+      },
+    },
     {
       name: 'Checkbox with validation error',
       context: {

package/src/components/inputs/single-checkbox/single-checkbox.njk

@@ -14,6 +14,7 @@
     helpText: helpText,
     value: value,
     options: options,
-    i18n: i18n
+    i18n: i18n,
+    attributes: attributes
   }) -}}
 </div>

package/src/components/inputs/text-editor/_template.njk

@@ -1,6 +1,7 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 {% from "../../icons/_macro.njk" import MdsIcon %}
+{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
 {% if params.helpText %}
   {% set helpTextId = [params.id, '-help-text'] | join %}
@@ -41,6 +42,7 @@
       {% if ariaDescribedBy %}
         aria-describedby="{{ariaDescribedBy}}"
       {% endif %}
+      {{- MdsAttributes(params.attributes) -}}
     >{#
       #}{% if params.value %}{{params.value}}{% endif %}{#
     #}</textarea>

package/src/components/inputs/text-editor/text-editor.njk

@@ -10,7 +10,8 @@
   value: value,
   state: state,
   validationError: validationError,
-  noMenu: noMenu
+  noMenu: noMenu,
+  attributes: attributes
 }) }}
 
 <div class="mds-margin-top-b10"></div>

package/src/components/inputs/textarea/_template.njk

@@ -1,6 +1,7 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 {% from "../../icons/_macro.njk" import MdsIcon %}
+{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
 {% if params.name %}
   {% set name = params.name %}
@@ -59,6 +60,7 @@
       {% if params.validationError %}
         aria-invalid="true"
       {% endif %}
+      {{- MdsAttributes(params.attributes) -}}
     >{#
       #}{% if params.value %}{{params.value}}{% endif %}{#
     #}</textarea>

package/src/components/inputs/textarea/textarea.njk

@@ -19,7 +19,8 @@
         classes: classes,
         tooltipMessage: tooltipMessage,
         maxlength: maxlength,
-        i18n: i18n
+        i18n: i18n,
+        attributes: attributes
       }) }}
     </div>
   </div>