@madgex/design-system 14.3.0 → 14.4.0

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

@@ -2,97 +2,4 @@ module.exports = {
   title: 'Card',
   label: 'Card',
   status: 'ready',
-  context: {
-    fractalLabel: 'Card',
-    inList: false,
-    classes: '',
-    content: '<h4>Card Title</h4><p>paragraph</p>',
-    id: 'default',
-  },
-  variants: [
-    {
-      name: 'card-in-list',
-      context: {
-        fractalLabel: 'Card used in a list',
-        inList: true,
-        classes: '',
-        content: '<h4>Card used in list (li instead of div)</h4><p>paragraph</p>',
-        id: 'in-list',
-      },
-    },
-    {
-      name: 'card-with-highlight',
-      context: {
-        fractalLabel: 'Card with background',
-        inList: false,
-        classes: 'mds-card--highlighted',
-        content: '<h4>Card Title</h4><p>paragraph</p>',
-        id: 'with-background',
-      },
-    },
-    {
-      name: 'card-with-custom-styling',
-      context: {
-        fractalLabel: 'Card with custom styling',
-        inList: false,
-        classes: 'mds-card--1',
-        content: '<h4>Card Title</h4><p>paragraph</p>',
-        id: 'with-custom-styling',
-      },
-    },
-    {
-      name: 'card-with-badges',
-      context: {
-        fractalLabel: 'Card with badges',
-        inList: false,
-        content: '<h4>Card Title</h4><p>paragraph</p>',
-        id: 'with-badge',
-        badges: {
-          left: [
-            {
-              label: 'Top Job',
-            },
-          ],
-          right: [
-            {
-              label: 'Approved Employer',
-              styleId: '1',
-            },
-            {
-              label: 'New',
-              styleId: 'new',
-            },
-          ],
-        },
-      },
-    },
-    {
-      name: 'link-card',
-      context: {
-        fractalLabel: 'Card with a link',
-        link: {
-          href: 'https://www.google.com',
-          title: 'Card with link',
-          containerElement: 'h3',
-        },
-        classes: '',
-        content: '<p>content</p><p>content</p><p>content</p><p>content</p>',
-        id: 'with link',
-      },
-    },
-    {
-      name: 'list-link-card',
-      context: {
-        fractalLabel: 'Card with link used in a list',
-        inList: true,
-        link: {
-          href: 'https://www.google.com',
-          title: 'Card with link',
-        },
-        classes: '',
-        content: '<p>content</p><p>content</p><p>content</p><p>content</p>',
-        id: 'in-list',
-      },
-    },
-  ],
 };

package/src/components/card/card.njk

@@ -1,22 +1 @@
-{% from "./card/_macro.njk" import MdsCard %}
-
-<div class="mds-margin-bottom-b5">
-  <h2>{{ fractalLabel }}</h2>
-  {%- if inList -%}
-    <ul>
-  {%- endif -%}
-
-  {% call MdsCard({
-    inList: inList,
-    classes: classes,
-    id: id,
-    badges: badges,
-    link: link
-  }) -%}
-  <!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
-  {{ content | safe }}
-  {%- endcall %}
-  {%- if inList -%}
-    </ul>
-  {%- endif -%}
-</div>
+<a href="/storybook/" target="_top">Moved to Storybook</a>

package/src/components/icons/icons.njk

@@ -1,161 +1 @@
-{# NUNJUCKS VERSION #}
-
-{% from "./icons/_macro.njk" import MdsIcon %}
-
-<h2>Different sizes</h2>
-
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--sm',
-  visuallyHiddenLabel: 'Shortlisted'
-}) }} : small (16px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--md'
-}) }} : medium (24px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--lg'
-}) }} : large (32px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--xl'
-}) }} : extra large (48px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--xxl'
-}) }} : extra extra large (72px)</p>
-
-<br><hr><br>
-
-<h2>Icon with text</h2>
-
-<p>{{- MdsIcon({
-  iconName: 'email',
-  classes: 'mds-icon--before'
-}) -}}Email me</p>
-
-<p><a href="#">Apply{{- MdsIcon({
-  iconName: 'chevron-right',
-  classes: 'mds-icon--after'
-}) -}}</a></p>
-
-<div>
-  <span>Share this job</span>
-  <ul class="mds-list mds-list--inline mds-display-inline-block">
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-facebook',
-        visuallyHiddenLabel: 'Facebook'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-twitter',
-        visuallyHiddenLabel: 'Twitter'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-linkedin',
-        visuallyHiddenLabel: 'LinkedIn'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-pinterest',
-        visuallyHiddenLabel: 'Pinterest'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-reddit',
-        visuallyHiddenLabel: 'Reddit'
-      }) -}}
-      </a>
-    </li>
-  </ul>
-</div>
-
-<br><hr><br>
-
-<h2>Spinner</h2>
-{{- MdsIcon({
-  iconName: 'spinner',
-  visuallyHiddenLabel: 'Loading...'
-}) -}}
-
-<br><hr><br>
-
-<h2>Has container</h2>
-{{- MdsIcon({
-  iconName: 'cross',
-  visuallyHiddenLabel: 'Error',
-  classes: 'mds-icon--md',
-  hasContainer: true,
-  containerClasses: 'mds-icon-container--circle mds-icon-container--error'
-}) -}}
-
-<br><hr><br>
-
-<h2>Icons using inline SVG</h2>
-
-<div>
-  <span>Share this job</span>
-  <ul class="mds-list mds-list--inline mds-display-inline-block">
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-facebook',
-        visuallyHiddenLabel: 'Facebook',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-twitter',
-        visuallyHiddenLabel: 'Twitter',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-linkedin',
-        visuallyHiddenLabel: 'LinkedIn',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-pinterest',
-        visuallyHiddenLabel: 'Pinterest',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-reddit',
-        visuallyHiddenLabel: 'Reddit',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-  </ul>
-</div>
+<a href="/storybook/" target="_top">Moved to Storybook</a>

package/src/components/inputs/combobox/README.md

@@ -2,34 +2,34 @@
 
 This component provides autocomplete search functionality to select an option from a list of options.
 
-Options can be provided via the `options` parameter, or obtained from an API using the `apiUrl` parameter.
-
-`value` is an Object or Array of Objects representing the selected option or options.
+Options can be provided via `<option value="value">label</option>` children, or obtained from an API using the `apiUrl` parameter.
 
 ## Parameters - Nunjucks
 
 - `id`: the id of your combobox **required**
 - `name`: the name of the input for form submission. Uses ID unless specified - **recommended**
 - `labelText`: the text used in the label **required**
-- `value`: the populated option `object` ( `{ label: 'Orange', value: 45 }`) or `array` of option `objects` ( `[{ label: 'Orange', value: 45 }, { label: 'Green', value: 33 }]`)
 - `searchText`: _Not_ the value, but the current text inside the search input.
-- `options`: an `array`, e.g `[{ label: 'Orange', value: 45 }]`. Populates both mds-combobox, and fallback select options
-- `apiUrl`: when populated, `options` is ignored and data is fetched from an API URL instead
+- `apiUrl`: when populated, options data is fetched from an API URL
 - `apiQueryKey`: the query parameter name added to `apiUrl` - (defaults to 'searchText')
 - `apiOptionsPath`: where to grab an array of options on api response, e.g. `data.options` would be an array of options. leave undefined to use root api response as array
-- `optionLabelPath`: where to grab the visual label from the option object e.g. 'label' or 'title' or 'nested.object.label' (defaults to `label`)
-- `optionValuePath`: where to grab the value from the option object e.g. `value` or `nested.object.value` (defaults to `value`)
+- `apiOptionLabelPath`: relative to options object returned from API response, e.g. `label` or `title` or `nested.object.label` (defaults to `label`)
+- `apiOptionValuePath`: relative to options object returned from API response, e.g. `value` or `score` or `nested.object.value` (defaults to `value`)
 - `multiple`: Boolean, whether to treat `value` input and output as an Array, or a singular. Also to display pills. default `false`
 - `fallbackTo`: the form element to use as a fallback. Should be either 'select' or 'input' **recommended** (see notes underneath)
-- `placeholder`: the placeholder for your input (defaults to 'Please select') **recommended**
+- `fallbackValue`: only when `fallbackTo` is `input`, the `value` attribute of the fallback `input` element
+- `placeholder`: the placeholder for your input **recommended**
 - `classes`: add extra classes to the trigger
 - `helpText`: Helper text to display under the label
 - `tooltipMessage`: Toggles a tooltip with this message to appear on the input
 - `validationError`: The error message provided by validation
 - `state`: The current state of the input, currently the only allowed value is `error`
-- `type`: applied as data-type` attribute, the name of the options api e.g "location-lookup"
+- `type`: applied as `data-type` attribute, the name of the options api e.g "location-lookup"
 - `i18n`: an `object`, Text to translate/customise
 - `minSearchCharacters`: The minimum number of characters inside the input before a search is performed to avoid low specificity searches. This should be matched by your implementation's search handler.
+- `attributes`: an `object`, attribute key/values applied directly to `mds-combobox` element
+- `hideLabel` — Boolean, visually hides the label.
+- `optional` - Boolean, marks field as optional in the label only
 
 ```
 i18n: {
@@ -48,13 +48,7 @@ i18n: {
 
 ## Usage
 
-MdsCombobox usage revolves around either options provided by `params.options` or an API (`apiUrl` in use), and being in `multiple` mode via `params.multiple`.
-If `multiple` mode is true,`params.value` must be undefined or an `array`, otherwise undefined or an `object`.
-
-The params `value`, `options`, `optionLabelPath` and `optionValuePath` are tightly coupled and must be compatible with each other:
-
-- `options`: an array of objects, each object has the property stated by `optionLabelPath` and `optionValuePath`
-- `value`: an object ( or array of objects if `multiple:true`), object is the same shape as the ones in `options`, each object has the property stated by `optionLabelPath` and `optionValuePath`
+MdsCombobox usage revolves around options provided by `<option value="">label</option>` child elements as available options and the initial value comes from `<option selected>` children, and optionally an API (`apiUrl` in use), and being in `multiple` mode via `params.multiple`.
 
 ## Fallback
 
@@ -63,65 +57,52 @@ When JavaScript is unavailable, the combobox will gracefully degrade to a native
 Both fallback elements share the same `id` as the combobox to ensure the label remains properly associated. However, the fallback's `name` attribute will be `[name]_fallback` to distinguish it from the JavaScript-enabled version. This allows your server-side code to detect when the fallback was used and handle the form submission appropriately.
 
 **Choosing a fallback type:**
+
 - Use `fallbackTo: 'select'` when you have a static, predefined list of options that work well in a standard dropdown.
 - Use `fallbackTo: 'input'` when options are dynamic (from an API) or when you prefer a text input. With a text input fallback, users can type and submit values that your server can then process (e.g., look up a location ID from a location name).
+- Use `fallbackValue` when using `fallbackTo: 'input'` to populate the fallback's value
 
-### Example - Single mode - no API - default option object shape
-
-As our options object uses the default property names, we don't need to specify them.
-
-```njk
-{\% call MdsCombobox({
-  id:'my-id',
-  name: 'my-combo',
-  labelText:'My Combo',
-  options: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ]
-}) \%}
-{\% endcall \%}
-
-```
-
-#### with prefilled value
+### Example - Single mode - no API - no option selected
 
 ```njk
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
   labelText:'My Combo',
-  value: {value: 'value-2', label: 'my-label-2'},
-  options: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ]
 }) \%}
+  <option value="value-1">My label 1</option>
+  <option value="value-2">My label 2</option>
 {\% endcall \%}
 
 ```
 
-### Example - Multiple mode - no API - default option object shape
+#### with pre-selected value
 
 ```njk
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
   labelText:'My Combo',
-  options: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ],
-  multiple: true
+  fallbackTo:'input',
+  fallbackValue:'value-2'
 }) \%}
+  <option value="value-1">My label 1</option>
+  <option value="value-2" selected>My label 2</option>
 {\% endcall \%}
 
 ```
 
-#### with prefilled value
-
-Note the value should be an array when using multiple mode.
+### Example - Multiple mode - no API
 
 ```njk
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
   labelText:'My Combo',
-  value: [{value: 'value-2', label: 'my-label-2'}],
-  options: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ],
   multiple: true
 }) \%}
+  <option value="value-1">My label 1</option>
+  <option value="value-2">My label 2</option>
 {\% endcall \%}
 
 ```
@@ -138,8 +119,8 @@ like so `[{word: 'something', score: 12},...]`. It also used `?keyword` for the
   labelText:'My Combo',
   apiUrl: '/api/location-lookup',
   apiQueryKey: 'keyword',
-  optionLabelPath: 'word',
-  optionValuePath: 'score'
+  apiOptionLabelPath: 'word',
+  apiOptionValuePath: 'score'
 }) \%}
 {\% endcall \%}
 
@@ -152,12 +133,13 @@ like so `[{word: 'something', score: 12},...]`. It also used `?keyword` for the
   id:'my-id',
   name: 'my-combo',
   labelText:'My Combo',
-  value: {word: 'my-label-2', score: 'value-2'},
   apiUrl: '/api/location-lookup',
   apiQueryKey: 'keyword',
-  optionLabelPath: 'word',
-  optionValuePath: 'score'
+  apiOptionLabelPath: 'word',
+  apiOptionValuePath: 'score'
 }) \%}
+{# we can render selected options on the server even when using API #}
+  <option value="value-2" selected>My label 2</option>
 {\% endcall \%}
 
 ```
@@ -183,18 +165,18 @@ options:
 
 #### with prefilled value
 
-Note the value is an array for multiple mode.
-
 ```njk
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
   labelText:'My Combo',
-  value: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ],
   apiUrl: '/api/location-lookup',
   apiOptionsPath: 'data',
   multiple: true
 }) \%}
+{# we can render selected options on the server even when using API #}
+  <option value="value-1" selected>My label 1</option>
+  <option value="value-2" selected>My label 2</option>
 {\% endcall \%}
 
 ```
@@ -208,3 +190,14 @@ When Javascript is not available, either a native combobox or native input will
 aria-describedBy has been added to notify screen reader users how to interact with the autocomplete suggestions.
 
 Note: There is a known issue with the `aria-activedescendant` attribute when using VoiceOver + Safari (it works on other browsers). VO doesn't read the current option. See https://bugs.webkit.org/show_bug.cgi?id=231724
+
+## Vue only usage - `<mds-combobox/>`
+
+### Props
+
+- `value` : `{Array|Object}`, the selected option(s)
+- `options`: Alterative to child Web Component's `<option/>` elements
+
+### Events
+
+- `update:value` & `change` : on value change

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)',