@madgex/design-system 14.2.0 → 14.3.1

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

@@ -41,18 +41,16 @@
     <mds-combobox
       combobox-id="{{ comboboxId }}"
       name="{{ comboboxName }}"
-      placeholder="{{ params.placeholder }}"
+      {% if params.placeholder %}placeholder="{{ params.placeholder }}"{% endif %}
       iconpath="{{ defaultIconPath }}"
-      {% if params.options and params.options.length %}options="{{params.options | dump }}"{% endif %}
       {% if params.apiUrl %}api-url="{{params.apiUrl}}"{% endif%}
       {% if params.apiQueryKey %}api-query-key="{{params.apiQueryKey}}"{% endif%}
       {% if params.apiOptionsPath %}api-options-path="{{params.apiOptionsPath}}"{% endif%}
-      {% if params.optionLabelPath %}option-label-path="{{params.optionLabelPath}}"{% endif%}
-      {% if params.optionValuePath %}option-value-path="{{params.optionValuePath}}"{% endif%}
+      {% if params.apiOptionLabelPath %}api-option-label-path="{{params.apiOptionLabelPath}}"{% endif%}
+      {% if params.apiOptionValuePath %}api-option-value-path="{{params.apiOptionValuePath}}"{% endif%}
       i18n="{{ params.i18n | dump }}"
       data-aria-invalid="{{ params.validationError }}"
       {% if params.minSearchCharacters %}min-search-characters="{{ params.minSearchCharacters }}"{% endif %}
-      {% if params.value %}value="{{ params.value | dump  }}"{% endif %}
       {% if params.searchText %}search-text="{{ params.searchText }}"{% endif %}
       {% if params.multiple %}multiple{% endif %}
       {% if ariaDescribedBy %} describedby-id="{{ariaDescribedBy}}"{% endif -%}
@@ -60,13 +58,7 @@
       >
       {# all 'default slot' fallback content is removed from DOM when vue component loads #}
         <div class="mds-form-element__fallback">
-        {# matches Combobox Vue component #}
-        {% set _optionValuePath = params.optionValuePath or "value"  %}
-        {% set _optionLabelPath = params.optionLabelPath or "label"  %}
-        {# if no provided options, at least try to render select input with value's options #}
-        {% set _options = params.options or (params.multiple and params.value) %}
-
-          {% if params.fallbackTo === 'select' and _options %}
+          {% if params.fallbackTo === 'select' %}
             <select
               class="mds-form-control"
               id="{{ comboboxId }}"
@@ -74,23 +66,11 @@
               {% if params.multiple %}multiple{% endif %}
               {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
             >
-              <option>{{ placeholder }}</option>
-              {%- if _options -%}
-                {%- for option in _options -%}
-                  <option
-                    value="{{ option[_optionValuePath] }}"
-                    {% if not params.multiple and params.value %}
-                      {# not multiple mode, see if value  #}
-                      {% if params.value[_optionValuePath] === option[_optionValuePath] %}selected{% endif %}
-                    {% elseif params.value %}
-                      {# multiple mode, so we assume params.value is an array #}
-                      {% for valOpt in params.value %}
-                      {%if valOpt[_optionValuePath] === option[_optionValuePath] %} selected {% endif %}
-                      {% endfor %}
-                    {% endif %}
-                  >{{ option[_optionLabelPath] }}</option>
-                {%- endfor -%}
-              {%- endif -%}
+              {% if params.placeholder %}<option>{{ params.placeholder }}</option>{% endif %}
+              {# caller should be a list of `<option>`s, we can reuse this for the select fallback #}
+              {% if caller %}
+                {{- caller() -}}
+              {% endif %}
             </select>
             {# we cant have multiple mode and use input #}
           {% elseif params.fallbackTo === 'input' %}
@@ -100,8 +80,8 @@
               name="{{ comboboxName }}_fallback"
               autocomplete="off"
               id="{{ comboboxId }}"
-              {% if params.value %} value="{{params.value[_optionValuePath]}}"{% endif %}
-              placeholder="{{ placeholder }}"
+              {% if params.fallbackValue %} value="{{params.fallbackValue}}"{% endif %}
+              {% if params.placeholder %}placeholder="{{ params.placeholder }}"{% endif %}
               {% if params.validationError %}aria-invalid="true"{% endif %}
               {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
               />

package/src/components/inputs/combobox/combobox.config.js

@@ -18,7 +18,7 @@ module.exports = {
         id: 'distance-selection',
         optional: 'true',
         labelText: 'How far are you willing to travel?',
-        options: optionsDistance,
+        content: optionsDistance.map((item) => `<option value="${item.value}">${item.label}</option>`).join(''),
         fallbackTo: 'select',
         classes: 'im-a-custom-class',
       },
@@ -31,7 +31,7 @@ module.exports = {
         id: 'salary-selection',
         optional: 'true',
         labelText: 'Salary expectations?',
-        options: optionsSalary,
+        content: optionsSalary.map((item) => `<option value="${item.value}">${item.label}</option>`).join(''),
         searchText: 'Up to',
         fallbackTo: 'select',
       },
@@ -50,8 +50,8 @@ module.exports = {
         apiUrl: 'https://api.datamuse.com/sug',
         apiQueryKey: 's',
         apiOptionsPath: undefined,
-        optionLabelPath: 'word',
-        optionValuePath: 'score',
+        apiOptionLabelPath: 'word',
+        apiOptionValuePath: 'score',
         i18n: {
           requiredIcon: 'Required (test i18n)',
           loadingText: 'Loading  (test i18n)',
@@ -64,40 +64,41 @@ module.exports = {
       },
     },
     {
-      name: 'AJAX autocomplete prefilled',
+      name: 'AJAX autocomplete pre-selected',
       context: {
         useAutocomplete: true,
-        variantTitle: 'AJAX autocomplete prefilled',
+        variantTitle: 'AJAX autocomplete pre-selected',
         name: 'keywords-prefilled',
         id: 'keywords-lookup-prefilled',
         labelText: 'Keywords:',
         placeholder: 'eg. Testimonials',
-        value: { word: 'Initial Value', score: 'the-value' },
+        content: `<option value="the-value" selected>Initial Value</option>`,
         fallbackTo: 'input',
         minSearchCharacters: 3,
         apiUrl: 'https://api.datamuse.com/sug',
         apiQueryKey: 's',
         apiOptionsPath: undefined,
-        optionLabelPath: 'word',
-        optionValuePath: 'score',
+        apiOptionLabelPath: 'word',
+        apiOptionValuePath: 'score',
       },
     },
     {
-      name: 'AJAX autocomplete prefilled with validation error',
+      name: 'AJAX autocomplete pre-selected with validation error',
       context: {
         useAutocomplete: true,
-        variantTitle: 'AJAX autocomplete prefilled with validation error',
+        variantTitle: 'AJAX autocomplete pre-selected with validation error',
         name: 'keywordsprefilled-error',
         id: 'keywords-lookup-prefilled-validation-error',
         labelText: 'Keywords:',
         placeholder: 'eg. Testimonials',
-        value: { word: 'Initial Value', score: 'the-value' },
+        content: `<option value="the-value" selected>Initial Value</option>`,
         fallbackTo: 'input',
         validationError: 'There was an error',
+        apiUrl: 'https://api.datamuse.com/sug',
         apiQueryKey: 's',
         apiOptionsPath: undefined,
-        optionLabelPath: 'word',
-        optionValuePath: 'score',
+        apiOptionLabelPath: 'word',
+        apiOptionValuePath: 'score',
       },
     },
     {
@@ -114,8 +115,8 @@ module.exports = {
         apiUrl: 'https://api.datamuse.com/sug',
         apiQueryKey: 's',
         apiOptionsPath: undefined,
-        optionLabelPath: 'word',
-        optionValuePath: 'score',
+        apiOptionLabelPath: 'word',
+        apiOptionValuePath: 'score',
         multiple: true,
         i18n: {
           requiredIcon: 'Required (test i18n)',
@@ -137,17 +138,17 @@ module.exports = {
         id: 'keywords-lookup-multiselect-prefilled',
         labelText: 'Keywords:',
         placeholder: 'eg. Web developer',
-        value: [
-          { word: 'Initial Value 1', score: 'the-value-1' },
-          { word: 'Initial Value 2', score: 'the-value-2' },
-        ],
+        content: `
+          <option value="the-value-1" selected>Initial Value 1</option>
+          <option value="the-value-2" selected>Initial Value 2</option>
+        `,
         fallbackTo: 'select',
         minSearchCharacters: 3,
         apiUrl: 'https://api.datamuse.com/sug',
         apiQueryKey: 's',
         apiOptionsPath: undefined,
-        optionLabelPath: 'word',
-        optionValuePath: 'score',
+        apiOptionLabelPath: 'word',
+        apiOptionValuePath: 'score',
         multiple: true,
         i18n: {
           requiredIcon: 'Required (test i18n)',

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

@@ -8,9 +8,7 @@
       id: id,
       name: name,
       labelText: labelText,
-      options: options,
       optional: optional,
-      value: value,
       searchText: searchText,
       fallbackTo: fallbackTo,
       classes: classes,
@@ -23,11 +21,13 @@
       apiUrl: apiUrl,
       apiQueryKey: apiQueryKey,
       apiOptionsPath: apiOptionsPath,
-      optionLabelPath: optionLabelPath,
-      optionValuePath: optionValuePath,
+      apiOptionLabelPath: apiOptionLabelPath,
+      apiOptionValuePath: apiOptionValuePath,
       multiple: multiple,
       attributes: attributes
     }) %}
+    {# this will be `<option>` elements #}
+    {{ content | safe }}
     {% endcall %}
   </div>
 </form>

package/src/components/inputs/combobox/combobox.scss

@@ -8,6 +8,9 @@
     gap: $constant-size-baseline;
   }
 }
+.mds-combobox option {
+  display: none;
+}
 .mds-combobox__search-input {
   flex: 1;
   min-width: 180px;

package/src/layout/forms/forms.config.js

@@ -32,7 +32,13 @@ module.exports = {
     combobox: {
       id: 'distance-selection',
       labelText: 'How far are you willing to travel?',
-      options: { 5: 'Within 5 miles', 10: 'Within 10 miles', 15: 'Within 15 miles', 20: 'Within 20 miles' },
+      options: [
+        { value: 5, label: 'Within 5 miles' },
+        { value: 10, label: 'Within 10 miles' },
+        { value: 15, label: 'Within 15 miles' },
+        { value: 20, label: 'Within 20 miles' },
+      ],
+      searchText: 'Within',
       fallbackTo: 'select',
       optional: true,
     },

package/src/layout/forms/forms.njk

@@ -29,14 +29,18 @@
         }) }}
       </div>
       <div class="mds-form-field">
-        {{ MdsCombobox({
+        {% call MdsCombobox({
           id: combobox.id,
           labelText: combobox.labelText,
-          options: combobox.options,
           fallbackTo: combobox.fallbackTo,
           optional: combobox.optional,
-          tooltipMessage: combobox.tooltipMessage
-        }) }}
+          tooltipMessage: combobox.tooltipMessage,
+          searchText:combobox.searchText
+        }) %}
+        {% for option in combobox.options %}
+        <option value="{{option.value}}">{{option.label}}</option>
+        {% endfor %}
+        {% endcall %}
       </div>
       <div class="mds-form-field">
         {{ MdsFileUpload({