@madgex/design-system 1.61.1 → 1.62.0

package/package.json

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

package/src/components/accordion/_template.njk

@@ -2,27 +2,27 @@
 
 {% if params.content %}
   {%- set triggerHtmlTag %}
-    {%- if params.triggerHtmlTag -%}
-        {{params.triggerHtmlTag}}
-    {%- else -%}
+  {%- if params.triggerHtmlTag -%}
+    {{params.triggerHtmlTag}}
+  {%- else -%}
         p
     {%- endif -%}
   {% endset -%}
   {%- set collapseIcon -%}
-    {%- if params.collapseIcon -%}
-      {{params.collapseIcon}}
-    {%- else -%}
+  {%- if params.collapseIcon -%}
+    {{params.collapseIcon}}
+  {%- else -%}
       chevron-up
     {%- endif -%}
   {% endset -%}
   {%- set expandIcon %}
-    {%- if params.expandIcon -%}
-      {{params.expandIcon}}
-    {%- else -%}
+  {%- if params.expandIcon -%}
+    {{params.expandIcon}}
+  {%- else -%}
       chevron-down
     {% endif -%}
   {% endset -%}
-  <{{triggerHtmlTag}} id="accordion-trigger-{{params.id}}" class="mds-accordion-trigger{%if params.triggerNoJsHidden %} mds-display-none{% endif %}" {% if params.breakpoint %}data-bp="{{params.breakpoint}}"{% endif %}{% if params.isExpanded %}data-expanded="{{params.isExpanded}}"{% endif %} data-test="accordion-trigger">
+  <{{triggerHtmlTag}} id="accordion-trigger-{{params.id}}" class="mds-accordion-trigger{%if params.triggerNoJsHidden %} mds-display-none{% endif %}" {% if params.breakpoint %}data-bp="{{params.breakpoint}}"{% endif %}{% if params.isExpanded %}data-expanded="{{params.isExpanded}}"{% endif %} data-test="accordion-trigger-{{params.id}}">
     <span {% if params.triggerClasses %}class="{{params.triggerClasses}}"{% endif %}>
       {% if params.leftAligned %}
         {{- MdsIcon({ iconName: collapseIcon, classes: 'mds-icon--before mds-accordion-trigger__icon-collapse'}) -}}
@@ -39,12 +39,12 @@
   </{{triggerHtmlTag}}>
   {% if params.useFieldset %}
     {# used in nested checkboxes #}
-    <fieldset class="mds-accordion-content" data-test="accordion-content">
+    <fieldset class="mds-accordion-content" data-test="accordion-content-{{params.id}}">
       <legend class="mds-visually-hidden">{{params.triggerLabel}}</legend>
       {{params.content | safe}}
     </fieldset>
   {% else %}
     {# using aria-label instead of aria-labelledby to avoid getting `triggerLabelActive` as label for the content #}
-    <div class="mds-accordion-content" {% if not params.triggerNoJsHidden %}aria-label="{{ params.triggerLabel }}" {% endif %}data-test="accordion-content">{{params.content | safe}}</div>
+    <div class="mds-accordion-content" {% if not params.triggerNoJsHidden %}aria-label="{{ params.triggerLabel }}" {% endif %}data-test="accordion-content-{{params.id}}">{{params.content | safe}}</div>
   {% endif %}
 {% endif %}

package/src/components/accordion/accordion.config.js

@@ -13,6 +13,7 @@ module.exports = {
         triggerNoJsHidden: true,
         content:
           '<dl class="mds-list mds-list--definition mds-list--border"><dt class="mds-list__key">Hours</dt><dd class="mds-list__value">Full time</dd><dt class="mds-list__key">Contract</dt><dd class="mds-list__value">Permanent</dd><dt class="mds-list__key">Industry</dt><dd class="mds-list__value">Accountant, Manager</dd></dl>',
+        id: 'taxonomy',
       },
     },
     {
@@ -27,6 +28,7 @@ module.exports = {
         leftAligned: true,
         content:
           '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. Etiam semper tempor erat, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
+        id: 'altIcons',
       },
     },
     {
@@ -39,6 +41,7 @@ module.exports = {
         triggerClasses: 'mds-font-great-primer',
         content:
           '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. Etiam semper tempor erat, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
+        id: 'collapsed',
       },
     },
     {
@@ -51,6 +54,7 @@ module.exports = {
         breakpoint: tokens.size.breakpoint.md.original.value,
         content:
           '<dl class="mds-list mds-list--definition mds-list--border"><dt class="mds-list__key">Hours</dt><dd class="mds-list__value">Full time</dd><dt class="mds-list__key">Contract</dt><dd class="mds-list__value">Permanent</dd><dt class="mds-list__key">Industry</dt><dd class="mds-list__value">Accountant, Manager</dd></dl>',
+        id: 'mobile',
       },
     },
   ],

package/src/components/button/_template.njk

@@ -12,24 +12,28 @@
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="mds-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} mds-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-test="button"{% endset %}
+{%- set commonAttributes %} class="mds-button{% if params.classes %}
+  {{ params.classes }}
+{% endif %}
+{% if params.disabled %} mds-button--disabled{% endif %}"{% for attribute, value in params.attributes %}{{attribute}}="{{value}}"{% endfor %} data-test="button-{{params.id}}"{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 
-{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
+{%- set buttonAttributes %}
+{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
 
 {#- Actually create a button... or a link! #}
 
 {%- if element == 'a' %}
-<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
-  {{ params.html | safe if params.html else params.text }}
-</a>
+  <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
+    {{ params.html | safe if params.html else params.text }}
+  </a>
 
 {%- elseif element == 'button' %}
-<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-  {{ params.html | safe if params.html else params.text }}
-</button>
+  <button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+    {{ params.html | safe if params.html else params.text }}
+  </button>
 
 {%- elseif element == 'input' %}
-<input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-{%- endif %}
+  <input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+{%- endif %}

package/src/components/button/button.config.js

@@ -3,6 +3,7 @@ module.exports = {
   status: 'wip',
   context: {
     text: 'Button 1',
+    id: 'default',
   },
   variants: [
     {
@@ -10,6 +11,7 @@ module.exports = {
       context: {
         href: 'http://madgex.com',
         text: 'Link button 1',
+        id: 'link-1',
       },
     },
     {
@@ -18,6 +20,7 @@ module.exports = {
         href: 'http://madgex.com',
         text: 'Link Plain button 2',
         classes: 'mds-button--plain',
+        id: 'link-2',
       },
     },
     {
@@ -25,6 +28,7 @@ module.exports = {
       context: {
         element: 'input',
         text: 'Input button 3',
+        id: 'link-3',
       },
     },
     {
@@ -32,6 +36,7 @@ module.exports = {
       context: {
         text: 'Plain button',
         classes: 'mds-button--plain',
+        id: 'plain',
       },
     },
     {
@@ -39,6 +44,7 @@ module.exports = {
       context: {
         text: 'Small button',
         classes: 'mds-button--small',
+        id: 'small',
       },
     },
     {
@@ -46,6 +52,7 @@ module.exports = {
       context: {
         text: 'Large button',
         classes: 'mds-button--large',
+        id: 'large',
       },
     },
     {
@@ -53,6 +60,7 @@ module.exports = {
       context: {
         text: 'Full width example',
         classes: 'mds-width-full mds-width-md-auto',
+        id: 'full',
       },
     },
     {
@@ -60,6 +68,7 @@ module.exports = {
       context: {
         text: 'Neutral',
         classes: 'mds-button--neutral',
+        id: 'neutral',
       },
     },
   ],

package/src/components/button/button.njk

@@ -5,5 +5,6 @@
   element: element,
   href: href,
   classes: classes,
-  attributes: attributes
+  attributes: attributes,
+  id: id
 }) }}

package/src/components/card/_template.njk

@@ -1,5 +1,5 @@
 {% if params.inList %}
-    <li class="mds-card mds-card--list-item{% if params.classes %} {{ params.classes }}{% endif %}" data-test="card">{{ params.content | safe }}</li>
+  <li class="mds-card mds-card--list-item{% if params.classes %} {{ params.classes }}{% endif %}" data-test="card-{{params.id}}">{{ params.content | safe }}</li>
 {% else %}
-    <div class="mds-card{% if params.classes %} {{ params.classes }}{% endif %}" data-test="card">{{ params.content | safe }}</div>
+  <div class="mds-card{% if params.classes %} {{ params.classes }}{% endif %}" data-test="card-{{params.id}}">{{ params.content | safe }}</div>
 {% endif %}

package/src/components/card/card.config.js

@@ -6,6 +6,7 @@ module.exports = {
     inList: false,
     classes: '',
     content: '<h4>Card Title</h4><p>paragraph</p>',
+    id: 'default',
   },
   variants: [
     {
@@ -15,6 +16,7 @@ module.exports = {
         inList: true,
         classes: '',
         content: '<h4>Card used in list (li instead of div)</h4><p>paragraph</p>',
+        id: 'in-list',
       },
     },
     {
@@ -24,6 +26,7 @@ module.exports = {
         inList: false,
         classes: 'mds-card--highlighted',
         content: '<h4>Card Title</h4><p>paragraph</p>',
+        id: 'with-background',
       },
     },
   ],

package/src/components/card/card.njk

@@ -8,7 +8,8 @@
   {{ MdsCard({
   inList: inList,
   classes: classes,
-  content: content
+  content: content,
+  id: id
 }) }}
 
   {% if fractalLabel === 'Card used in a list' %}

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

@@ -13,11 +13,11 @@
   {% if checkboxParams.options and checkboxParams.options.length %}
     {% for option in checkboxParams.options %}
       {%- set optionId -%}
-        {%- if option.id -%}{#
-          #}{{ option.id }}{#
-        #}{% else %}{#
+      {%- if option.id -%}{#
+        #}{{ option.id }}{#
+      #}{% else %}{#
         #}{{ checkboxParams.name }}-{{ option.value }}{#
-        #}{% endif -%}
+      #}{% endif -%}
       {%- endset -%}
       {%- set isSelected = false -%}
       {%- set accordionIsExpanded = false -%}
@@ -29,43 +29,43 @@
           {% set selectedOptions = [selectedOptions] %}
         {% endif %}
         {% for selectedOption in selectedOptions %}
-          {% if selectedOption == option.value  %}
+          {% if selectedOption == option.value %}
             {%- set isSelected = true -%}
           {% endif %}
           {% for nestedOption in option.options %}
-            {% if selectedOption == nestedOption.value  %}
+            {% if selectedOption == nestedOption.value %}
               {%- set accordionIsExpanded = true -%}
             {% endif %}
           {% endfor %}
         {% endfor %}
       {% endif %}
-        <div class="mds-form-check{% if option.classes %} {{option.classes}}{% endif %}">
-          <input 
+      <div class="mds-form-check{% if option.classes %} {{option.classes}}{% endif %}">
+        <input 
             type="checkbox" 
             class="mds-form-check__input" 
             name="{{ checkboxParams.name }}" 
             id="{{ optionId }}" 
             {% if checkboxParams.disabled %}disabled="disabled"{% endif %} 
             {% if isSelected == true %}checked="checked"{% endif %}
-            value="{{ option.value }}" 
-          />{#
+            value="{{ option.value }}"
+        />{#
           # Avoid extra space created by line breaks #
           #}<label class="mds-form-check__label" for="{{ optionId }}">{#
             #}{{ option.labelText }}{#
           #}</label>
-          {% if option.options and option.options.length %}
-            {%- set triggerLabel %}Select options under {{ option.labelText | safe }}{% endset -%}
-            {%- set accordionContent %}
-              <div class="mds-form-check__nested-container">
-                {{ createCheckboxes({
+        {% if option.options and option.options.length %}
+          {%- set triggerLabel %}Select options under {{ option.labelText | safe }}{% endset -%}
+          {%- set accordionContent %}
+          <div class="mds-form-check__nested-container">
+            {{ createCheckboxes({
                   options: option.options,
                   selectedOptions: checkboxParams.selectedOptions,
                   name: checkboxParams.name, 
                   disabled: checkboxParams.disabled
                 }) }}
-              </div>
-            {% endset -%}
-            {{ MdsAccordion({
+          </div>
+          {% endset -%}
+          {{ MdsAccordion({
               id: optionId,
               triggerHtmlTag: 'div',
               triggerLabel: triggerLabel,
@@ -77,9 +77,9 @@
               useFieldset: true,
               isExpanded: accordionIsExpanded
             }) }}
-          {% endif %}
-        </div>
-      {% endfor %}
+        {% endif %}
+      </div>
+    {% endfor %}
   {% endif %}
 {% endmacro %}
 
@@ -97,11 +97,11 @@
   {% endif %}
 {% endif %}
 
-<div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="checkbox">
+<div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="checkbox-{{params.id}}">
   {# no need for fieldset and legend if there is only one checkbox #}
   {% if params.options.length > 1 %}
-  <fieldset>
-    {{ MdsInputLabel({
+    <fieldset>
+      {{ MdsInputLabel({
       element: 'legend',
       labelText: params.labelText,
       hideLabel: params.hideLabel,
@@ -109,7 +109,7 @@
       optional: params.optional,
       tooltipMessage: params.tooltipMessage
     }) }}
-  {% endif %}
+    {% endif %}
     {{ MdsInputMessages({
       id: params.id,
       helpText: params.helpText,
@@ -123,7 +123,7 @@
         disabled: params.disabled
       }) }}
     </div>
-  {% if params.options.length > 1 %}
-  </fieldset>
+    {% if params.options.length > 1 %}
+    </fieldset>
   {% endif %}
 </div>

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

@@ -2,17 +2,16 @@
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 
 {%- set comboboxId %}
-  {%- if params.id -%}
-    {{ params.id }}
-  {%- else -%}
-    {#
+{%- if params.id -%}
+  {{ params.id }}
+{%- else -%}
+  {#
       if the id is missing it will be constructed using:
       [component name]-[item labelText]-[index]
       e.g. period-next-week-2
     #}
-    {%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}{%- else -%}
-    {{ params.labelText | lower | trim | replace(' ', '-') }}{%- endif -%}
-  {%- endif -%}
+{%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}{%- else -%}{{ params.labelText | lower | trim | replace(' ', '-') }}{%- endif -%}
+{%- endif -%}
 {% endset -%}
 
 {% if params.name %}
@@ -22,15 +21,15 @@
 {% endif %}
 
 {%- set placeholder %}
-  {%- if params.placeholder -%}
-    {{ params.placeholder }}
-  {%- else -%}
+{%- if params.placeholder -%}
+  {{ params.placeholder }}
+{%- else -%}
     Please select
   {%- endif -%}
 {% endset -%}
 
 {%- if comboboxId -%}
-  <div class="mds-form-element mds-form-element--combobox js-mds-combobox{% if params.classes %} {{params.classes}}{% endif %}{% if params.state %} mds-form-element--{{params.state}}{% endif %}" data-combobox-id="{{ comboboxId }}" data-test="combobox" data-type="{{ params.type }}">
+  <div class="mds-form-element mds-form-element--combobox js-mds-combobox{% if params.classes %} {{params.classes}}{% endif %}{% if params.state %} mds-form-element--{{params.state}}{% endif %}" data-combobox-id="{{ comboboxId }}" data-test="combobox-{{comboboxId}}" data-type="{{ params.type }}">
     {{ MdsInputLabel({
       labelText: params.labelText,
       hideLabel: params.hideLabel,
@@ -54,7 +53,7 @@
           {%- endif -%}
         </select>
       {% elseif params.fallbackTo === 'input' %}
-          <input class="mds-form-control" type="text" name="{{ comboboxName }}" autocomplete="off" id="{{ comboboxId }}" value="{{ params.value|default('') }}" placeholder="{{ placeholder }}" />
+        <input class="mds-form-control" type="text" name="{{ comboboxName }}" autocomplete="off" id="{{ comboboxId }}" value="{{ params.value|default('') }}" placeholder="{{ placeholder }}"/>
       {% endif %}
     </div>
     {# Leave the custom element at the bottom so it has access to the above elements on render #}

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

@@ -1,5 +1,6 @@
 <template>
   <li
+    ref="list-item"
     class="mds-combobox__option"
     role="option"
     :class="{ 'mds-combobox__option--focused': focused }"
@@ -30,6 +31,11 @@ export default {
     searchValue(newSearchValue) {
       return newSearchValue;
     },
+    focused(value) {
+      if (value) {
+        this.$refs['list-item'].scrollIntoView(false);
+      }
+    },
   },
   methods: {
     highlightOption() {

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

@@ -16,8 +16,8 @@
 {% endif %}
 
 {% set removeButtonText -%}
-  {{- params.removeButtonText -}}
-  {{-
+{{- params.removeButtonText -}}
+{{-
     MdsIcon({
       iconName: 'cross',
       classes: 'mds-icon--after'
@@ -25,23 +25,23 @@
   -}}
 {%- endset %}
 
-<div class="mds-form-element mds-form-element--file{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}{% if params.value %} mds-form-element--selected-file{% endif %}" id="{{ params.id }}-container" data-test="input">
-    {{ MdsInputLabel({
+<div class="mds-form-element mds-form-element--file{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}{% if params.value %} mds-form-element--selected-file{% endif %}" id="{{ params.id }}-container" data-test="input-{{ params.id }}">
+  {{ MdsInputLabel({
       labelText: params.labelText,
       hideLabel: params.hideLabel,
       id: params.id,
       optional: params.optional,
       tooltipMessage: params.tooltipMessage
     }) }}
-    {% if params.value %}<p class="mds-js-visually-hidden">{% if params.selectedFileText %}{{ params.selectedFileText }}{% else %}Use {{ params.value }} or upload a different file{% endif %}</p>{% endif %}
-    {{ MdsInputMessages({
+  {% if params.value %}<p class="mds-js-visually-hidden">{% if params.selectedFileText %}{{ params.selectedFileText }}{% else %}Use {{ params.value }} or upload a different file{% endif %}</p>{% endif %}
+  {{ MdsInputMessages({
       id: params.id,
       helpText: params.helpText,
       validationError: params.validationError
     }) }}
   <div class="mds-file-upload">
     <div class="mds-file-upload__input">
-        <input
+      <input
           class="mds-form-control"
           type="file"
           name="{{ name }}"
@@ -52,46 +52,46 @@
           {% if params.disabled %}
             disabled="disabled"
           {% endif %}
-        />
-        <div class="mds-file-upload__input-controls" aria-hidden="true">
-          <div class="mds-file-upload__selection-state">
-            <div class="mds-file-upload__prompt">
-              {{
+/>
+      <div class="mds-file-upload__input-controls" aria-hidden="true">
+        <div class="mds-file-upload__selection-state">
+          <div class="mds-file-upload__prompt">
+            {{
                 MdsIcon({
                   iconName: 'upload',
                   classes: 'mds-icon--md mds-icon--before'
                 })
               }}
-              <span>
-                {{ params.defaultFileText }}
-              </span>
-            </div>
-            {# The "button" is actually a label referencing the input but it looks like a button so using this for the name of the class #}
-            <div class="mds-file-upload__browse-button mds-text-align-center">
-              {{ MdsInputLabel({
+            <span>
+              {{ params.defaultFileText }}
+            </span>
+          </div>
+          {# The "button" is actually a label referencing the input but it looks like a button so using this for the name of the class #}
+          <div class="mds-file-upload__browse-button mds-text-align-center">
+            {{ MdsInputLabel({
                 labelText: buttonText,
                 id: params.id
               }) }}
-            </div>
           </div>
-          <div class="mds-file-upload__selected-state">
-            <div class="mds-file-upload__file-name-container">
-              {{- MdsIcon({ 
+        </div>
+        <div class="mds-file-upload__selected-state">
+          <div class="mds-file-upload__file-name-container">
+            {{- MdsIcon({ 
                 iconName: 'check',
                 classes: 'mds-icon--md',
                 hasContainer: true,
                 containerClasses: 'mds-icon-container--circle mds-icon-container--success mds-icon-container--before' 
                 }) 
               -}}
-              <span class="mds-file-upload__file-name">{% if params.value %}{{ params.value }}{% endif %}</span>
-            </div>
-            {{ MdsButton({
+            <span class="mds-file-upload__file-name">{% if params.value %}{{ params.value }}{% endif %}</span>
+          </div>
+          {{ MdsButton({
                 html: removeButtonText,
                 classes: 'mds-button--plain mds-button--small mds-file-upload__remove-button',
                 type: 'button'
             }) }}
-            </div>
         </div>
-    </div>  
+      </div>
+    </div>
   </div>
 </div>

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

@@ -7,7 +7,7 @@
   {% set name = params.id %}
 {% endif %}
 
-<div class="mds-form-element mds-form-element--input{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="input">
+<div class="mds-form-element mds-form-element--input{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="input-{{ params.id }}">
   {{ MdsInputLabel({
     labelText: params.labelText,
     hideLabel: params.hideLabel,
@@ -20,7 +20,7 @@
     helpText: params.helpText,
     validationError: params.validationError
   }) }}
-    <input
+  <input
       class="mds-form-control"
       type="{{ params.type }}"
       name="{{ name }}"
@@ -37,5 +37,5 @@
       {% if params.value %}
         value="{{params.value}}"
       {% endif %}
-    />
+/>
 </div>

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

@@ -7,8 +7,7 @@
   {%- set name = params.id -%}
 {%- endif -%}
 
-
-<div class="mds-form-element mds-form-element--radio{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="radio">
+<div class="mds-form-element mds-form-element--radio{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="radio-{{params.id}}">
   <fieldset>
     {{ MdsInputLabel({
         element: 'legend',
@@ -33,11 +32,12 @@
           {% if params.disabled %}disabled="disabled"{% endif %} 
           {% if params.value == radio.value %}checked="checked"{% endif %}
           value="{{radio.value}}" 
-        />{#
+/>
+        {#
         # Avoid extra space created by line breaks #
         #}<label class="mds-form-check__label" for="{{radio.id}}">{#
           #}{{radio.labelText}}{#
-        ´#}</label>
+        #}</label>
       </div>
     {% endfor %}
   </fieldset>

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

@@ -12,7 +12,7 @@
   {%- if params.classes %} {{params.classes}}{% endif -%}
   {%- if params.state %} mds-form-element--{{params.state}}{% endif -%}" 
   id="{{ params.id }}-container" 
-  data-test="select"
+  data-test="select-{{ params.id }}"
 >
   {{ MdsInputLabel({
     labelText: params.labelText,
@@ -37,16 +37,16 @@
     {% endif -%}
     class="mds-form-control"
   >
-  <option 
+    <option 
     disabled="disabled"
     {%- if not params.value %} selected="selected"{% endif -%}
   >
     Please select
   </option>
-  {%- for option in params.options %}
-    <option value="{{option.value}}" {%- if option.value == params.value %}selected="selected"{% endif -%}>
-      {{option.labelText}}
-    </option>
-  {% endfor -%}
+    {%- for option in params.options %}
+      <option value="{{option.value}}" {%- if option.value == params.value %}selected="selected"{% endif -%}>
+        {{option.labelText}}
+      </option>
+    {% endfor -%}
   </select>
 </div>