@madgex/design-system 3.4.2 → 3.6.0

package/docs/tokens/icons.njk

@@ -9,7 +9,7 @@ All icons available in MDS
 {% macro Icon(params) %}
 <div class="icon">
   <svg class="mds-icon mds-icon--{{ params.name }}{% if class %} {{ class }}{% endif %}">
-    <use href="{{ '/assets/icons.svg' | path }}#{{ params.name }}" />
+    <use href="{{ '/assets/icons.svg' | path }}#icon-{{ params.name }}" />
   </svg>
   <span class="icon__label"><code>mds-icon--{{ params.name }}</code></span>
 </div>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "3.4.2",
+  "version": "3.6.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -97,7 +97,7 @@
     "sass": "^1.35.2",
     "semantic-release": "^15.13.24",
     "svg-sprite-loader": "^6.0.9",
-    "svgo": "^2.3.1",
+    "svgo": "^2.8.0",
     "svgo-loader": "^3.0.0",
     "svgstore": "^3.0.0-2",
     "vue-jest": "^3.0.7",

package/src/components/icons/README.md

@@ -1,17 +1,21 @@
+## Setup
+
+**Default path of the icons file**:
+
+You need to set `defaultIconPath` as a Nunjucks global if you want to use an external file (for example, `/assets/icons/svg`).
+https://mozilla.github.io/nunjucks/api.html#addglobal
+
+If you prefer using inline svgs, don't set the path and include the file `icons-inline.svg` in your template instead.
+
 ## Parameters
 
 - `iconName`: the name of the icon you want to use
 - `classes`: add extra CSS classes to the icon
-- `path`: if you need to use a different path than the default (*/assets/icons.svg*)
+- `path`: if you need to use a different path than your default
 - `visuallyHiddenLabel`: add a visually hidden label (see Accessibility notes below)
 - `hasContainer`: `true/false` - used to add a container arount the icon *optional*
 - `containerClasses`: classes for the container (see Container notes below)
 
-**Note regarding the default path of the icons file**:
-If you would like to change the default path, you can use the `defaultIconPath` variable in Nunjucks. You can set it as global variable like this:
-
-`env.addGlobal('defaultIconPath', value)`
-
 ## Accessibility
 
 The SVGs are hidden from screen readers by default (with the use of `aria-hidden=true` and `focusable=false`). When the icons are used without a visible label, a **visually hidden label needs to be added** instead.

package/src/components/icons/_template.njk

@@ -1,15 +1,8 @@
-{%- set iconPath -%}
-  {%- if defaultIconPath -%}
-    {{- defaultIconPath -}}
-  {%- else -%}
-    '/assets/icons.svg'
-  {%- endif -%}
-{%- endset -%}
 {%- if params.hasContainer -%}
   <span class="mds-icon-container {{ params.containerClasses }}">
 {%- endif -%}
   <svg aria-hidden="true" focusable="false" class="mds-icon mds-icon--{{ params.iconName }}{% if params.classes %} {{ params.classes }}{% endif %}">
-    <use href="{{ params.path | default(iconPath) }}#{{ params.iconName }}" />
+    <use href="{{ params.path | default(defaultIconPath) }}#icon-{{ params.iconName }}" />
   </svg>
   {%- if params.visuallyHiddenLabel %}
     <span class="mds-visually-hidden">{{ params.visuallyHiddenLabel }}</span>

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

@@ -15,7 +15,7 @@
       {{- MdsIcon({
         iconName: 'asterisk',
         classes: 'mds-form-label__required',
-        visuallyHiddenLabel: 'required'
+        visuallyHiddenLabel: params.i18n.requiredIcon | default('required')
       }) -}}
   {%- endif -%}{#
 #}</label>

package/src/components/inputs/checkbox-list/README.md

@@ -12,6 +12,13 @@
 - `describedBy`: adding aria-describeby to the fieldset (if multiple checkboxes) or the input field if only one checkbox - **optional**
 - `options`: This is an array of objects containing the parameters for each option: `labelText`, `value`, `id`, `classes`
 - `selectedOptions`: Preselected checkboxes - Array or comma-separated string **optional**
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon (label)
+  accordionTrigger: 'Select options under {label}' // text to improve a11y on nested checkboxes - please note the use of `{label}` to get the name of the option
+}
+```
 
 **Note:** `id` in `options` is optional. If you don't specify one, an id will be created for you using the name/id of the field and the value of the option.
 

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

@@ -51,15 +51,15 @@
           optional: true
         }) }}
         {% if option.options and option.options.length %}
-          {%- set triggerLabel %}Select options under {{ option.labelText | safe }}{% endset -%}
+          {%- set triggerLabel %}{{ checkboxParams.i18n.accordionTrigger | default('Select options under {label}') | replace('{label}', 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
-                }) }}
+              options: option.options,
+              selectedOptions: checkboxParams.selectedOptions,
+              name: checkboxParams.name,
+              disabled: checkboxParams.disabled
+            }) }}
           </div>
           {% endset -%}
           {{ MdsAccordion({
@@ -102,7 +102,8 @@
       hideLabel: params.hideLabel,
       inputId: params.id,
       optional: params.optional,
-      tooltipMessage: params.tooltipMessage
+      tooltipMessage: params.tooltipMessage,
+      i18n: params.i18n
     }) }}
     {{ MdsInputMessages({
       id: params.id,
@@ -114,7 +115,8 @@
         options: params.options,
         selectedOptions: params.selectedOptions,
         name: name,
-        disabled: params.disabled
+        disabled: params.disabled,
+        i18n: params.i18n
       }) }}
     </div>
   </fieldset>

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

@@ -81,6 +81,9 @@ module.exports = {
         labelText: 'Industry',
         tooltipMessage: 'Select some options',
         selectedOptions: [101, 600104],
+        i18n: {
+          accordionTrigger: 'Please find more options under {label}',
+        },
         options: [
           {
             value: 101,

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

@@ -13,6 +13,7 @@
     tooltipMessage: tooltipMessage,
     optional: optional,
     state: state,
-    validationError: validationError
+    validationError: validationError,
+    i18n: i18n
   }) }}
 </div>

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

@@ -13,6 +13,17 @@
 - `validationError`: The error message provided by validation _optional_,
 - `state`: The current state of the input, currently the only allowed value is `error` _optional_
 - `type`: name of the options api e.g "location-lookup"
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon (label)
+  loadingText: 'Loading', // visually hidden text for the loading icon
+  describedByText:
+    'When autocomplete results are available, use up and down arrows to review and enter to select.', // help text for screen readers users to explain how to use the combobox
+  resultsMessage: '{count} result available.', // announce number of results - note the use of `{count}` to get the number of results
+  resultsMessage_plural: '{count} results available.', // announce number of results (plural) - note the use of `{count}` to get the number of results
+}
+```
 
 ## Props - Vue component
 
@@ -23,6 +34,7 @@
 - `value`: a default value for the combobox input. Populated automatically from Nunjucks parameters
 - `options`: an array of options, which should be objects with a `label` and a `value`. The array should be provided externally by selecting the custom `<mds-combobox>` element and setting it as an attribute
 - `filterOptions`: whether or not the Vue component should internally filter the options array according to the search input (defaults to true)
+- `i18n`: Text to translate/customise. Populated automatically from Nunjucks parameters
 
 ## Accessibility
 

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

@@ -30,7 +30,8 @@
       inputId: comboboxId,
       id: labelId,
       optional: params.optional,
-      tooltipMessage: params.tooltipMessage
+      tooltipMessage: params.tooltipMessage,
+      i18n: params.i18n
     }) }}
     {{ MdsInputMessages({
       id: comboboxId,
@@ -52,7 +53,8 @@
       {% endif %}
     </div>
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
-    <mds-combobox comboboxid="{{ comboboxId }}" placeholder="{{ params.placeholder }}" iconpath="{{ defaultIconPath }}" data-aria-invalid="{{ params.validationError }}"
+    <mds-combobox comboboxid="{{ comboboxId }}" placeholder="{{ params.placeholder }}" iconpath="{{ defaultIconPath }}" 
+      i18n="{{ params.i18n | dump }}" data-aria-invalid="{{ params.validationError }}"
       {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
       ></mds-combobox>

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

@@ -1,7 +1,6 @@
 module.exports = {
   title: 'Combobox',
   label: 'Combobox',
-  status: 'wip',
   variants: [
     {
       name: 'default',
@@ -25,6 +24,14 @@ module.exports = {
         labelText: 'Keywords:',
         placeholder: 'eg. Web developer',
         fallbackTo: 'input',
+        i18n: {
+          requiredIcon: 'Required (test i18n)',
+          loadingText: 'Loading  (test i18n)',
+          describedByText:
+            'When autocomplete results are available, use up and down arrows to review and enter to select. (test i18n)',
+          resultsMessage: '{count} result available  (test i18n)',
+          resultsMessage_plural: '{count} results available  (test i18n)',
+        },
       },
     },
     {

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

@@ -13,7 +13,8 @@
       fallbackTo: fallbackTo,
       classes: classes,
       placeholder: placeholder,
-      type: type
+      type: type,
+      i18n: i18n
     }) }}
     <br><br>
   </div>

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

@@ -37,9 +37,7 @@
       </template>
     </ListBox>
     <div aria-live="polite" role="status" class="mds-visually-hidden">{{ resultCountMessage }}</div>
-    <span :id="describedBy" style="display: none">
-      When autocomplete results are available use up and down arrows to review and enter to select.
-    </span>
+    <span :id="describedBy" style="display: none">{{ i18nText.describedByText }} </span>
   </div>
 </template>
 
@@ -88,6 +86,10 @@ export default {
       type: String,
       default: '',
     },
+    i18n: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -96,13 +98,12 @@ export default {
       chosen: null,
       searchValue: this.$props.value,
       resultCountMessage: null,
-      resultMessage: 'result available',
-      resultMessage_plural: 'results available',
     };
   },
   provide() {
     return {
       iconPath: this.iconpath,
+      loadingText: this.i18nText.loadingText,
     };
   },
   computed: {
@@ -184,6 +185,17 @@ export default {
     ariaInvalid() {
       return this.dataAriaInvalid ? 'true' : 'false';
     },
+    i18nText() {
+      return this.i18n
+        ? JSON.parse(this.i18n)
+        : {
+            loadingText: 'Loading',
+            describedByText:
+              'When autocomplete results are available, use up and down arrows to review and enter to select.',
+            resultsMessage: '{count} result available',
+            resultsMessage_plural: '{count} results available',
+          };
+    },
   },
   methods: {
     makeActive() {
@@ -252,9 +264,10 @@ export default {
     updateCount() {
       this.clearCount();
       setTimeout(() => {
-        const message = this.visibleOptions.length === 1 ? this.resultMessage : this.resultMessage_plural;
+        const message =
+          this.visibleOptions.length === 1 ? this.i18nText.resultsMessage : this.i18nText.resultsMessage_plural;
 
-        this.resultCountMessage = `${this.visibleOptions.length} ${message}`;
+        this.resultCountMessage = message.replace('{count}', this.visibleOptions.length);
       }, 1400);
     },
     clearCount() {

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

@@ -4,9 +4,9 @@
       <!-- Ideally we would pass this in as a slot in the custom element with MdsIcon, but something is borked
       with passing slots in Chrome https://github.com/karol-f/vue-custom-element/issues/162 -->
       <svg aria-hidden="true" focusable="true" class="mds-icon mds-icon--spinner mds-icon--after">
-        <use :href="`${iconPath}#spinner`" />
+        <use :href="`${iconPath}#icon-spinner`" />
       </svg>
-      <span class="mds-visually-hidden">Loading...</span>
+      <span class="mds-visually-hidden">{{ loadingText }}</span>
     </li>
     <slot></slot>
   </ul>
@@ -29,6 +29,6 @@ export default {
       required: true,
     },
   },
-  inject: ['iconPath'],
+  inject: ['iconPath', 'loadingText'],
 };
 </script>

package/src/components/inputs/file-upload/README.md

@@ -1,9 +1,6 @@
 ## Parameters
 
 - `labelText`: The label for the input **required**,
-- `buttonText`: The text for the secondary label acting as the file upload button, uses labelText unless specified **optional**,
-- `defaultFileText`: The default text to show in place of a file name when a user has not selected a file yet **required**,
-- `removeButtonText`: The text to show on the button that clears the input when a file has been selected **required**,
 - `hideLabel`: true/false - Add this parameter if you need to visually hide the label **optional**
   **(please see accessibility notes below regarding the use of this parameter)**
 - `name`: The name of the input field, uses ID unless specified **optional**,
@@ -15,9 +12,22 @@
 - `state`: The current state of the input, currently the only allowed value is `error` **optional**,
 - `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
 - `classes`: add extra classes to the trigger **optional**
-- `fileTypes`: comma separated list of the different types of file you want to allow. It will add the `accept` attribute on the input - **optional ** (see notes on validation)
+- `fileTypes`: comma separated list of the different types of file you want to allow. It will add the `accept` attribute on the input - **optional** (see notes on validation)
 - `value`: name of a file - we can't pre-fill a file input for security reasons but using `value` will allow you to indicate to the user that the system will use a pre-saved file. You will need to add logic behind the scenes to cater for that option. **optional**
-- `selectedFileText`: To be used in combination with `value`. Add text which explains that the system will use a pre-saved file. Useful when there is no javascript or for browsers that don't support the drag and drop. To ensure accessibility, the text "Use `[params.value]` or upload a different file" is added by default when `value` is used. Use `selectedFileText` to customise it. **optional**
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  defaultFileText: 'Drag and drop',
+  buttonText: 'Choose a file',
+  removeButtonText: 'Remove file',
+  selectedFileText: 'Selected file:', // hidden text when a file has been selected
+  fallbackSelectedFileText: 'Use `[value]` or upload a different file'
+}
+```
+  + `defaultFileText`: The default text to show in place of a file name when a user has not selected a file yet
+  + `buttonText`: The text for the file upload button
+  + `removeButtonText`: The text to show on the button that clears the input when a file has been selected
+  + `fallbackSelectedFileText`: To be used in combination with `value`. Add text which explains that the system will use a pre-saved file. Useful when there is no javascript or for browsers that don't support the drag and drop. To ensure accessibility, the text "Use `[value]` or upload a different file" is added by default when `value` is used.
 
 ## Accessibility
 

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

@@ -9,14 +9,8 @@
   {% set name = params.id %}
 {% endif %}
 
-{% if params.buttonText %}
-  {% set buttonText = params.buttonText %}
-{% else %}
-  {% set buttonText = params.labelText %}
-{% endif %}
-
 {% set removeButtonText -%}
-{{- params.removeButtonText -}}
+{{- params.i18n.removeButtonText | default('Remove file') -}}
 {{-
     MdsIcon({
       iconName: 'cross',
@@ -33,7 +27,7 @@
       optional: params.optional,
       tooltipMessage: params.tooltipMessage
     }) }}
-  {% if params.value %}<p class="mds-file-upload__selected-file-fallback">{% if params.selectedFileText %}{{ params.selectedFileText }}{% else %}Use {{ params.value }} or upload a different file{% endif %}</p>{% endif %}
+  {% if params.value %}<p class="mds-file-upload__selected-file-fallback">{{ params.i18n.fallbackSelectedFileText | default('Use ' + params.value + ' or upload a different file') }}</p>{% endif %}
   {{ MdsInputMessages({
       id: params.id,
       helpText: params.helpText,
@@ -66,12 +60,12 @@
                 })
               }}
             <span>
-              {{ params.defaultFileText }}
+              {{ params.i18n.defaultFileText | default('Drag and drop') }}
             </span>
           </div>
           <div class="mds-file-upload__browse-button mds-text-align-center">
               <div class="mds-form-label">
-                <label class="mds-form-label__label" for="{{params.id}}">{{ buttonText }}</label>
+                <label class="mds-form-label__label" for="{{params.id}}">{{ params.i18n.buttonText | default('Choose a file') }}</label>
               </div>
           </div>
         </div>
@@ -84,7 +78,7 @@
                 containerClasses: 'mds-icon-container--circle mds-icon-container--success mds-icon-container--before'
                 })
               -}}
-            <span class="mds-visually-hidden">Selected file: </span>
+            <span class="mds-visually-hidden">{{ params.i18n.selectedFileText | default('Selected file:') }} </span>
             <span class="mds-file-upload__file-name">{% if params.value %}{{ params.value }}{% endif %}</span>
           </div>
           {{ MdsButton({

package/src/components/inputs/file-upload/file-upload.config.js

@@ -1,12 +1,8 @@
 module.exports = {
   title: 'File Upload',
-  status: 'wip',
   context: {
     labelText: 'Upload a file',
     helpText: 'Your file must be a .doc, .pdf, .docx, or .rtf. No larger than 1MB',
-    defaultFileText: 'Drag and drop',
-    buttonText: 'Choose a file',
-    removeButtonText: 'Remove file',
     name: 'file',
     id: 'file',
     fileTypes: '.doc,.docx,.pdf,.rtf',
@@ -18,7 +14,9 @@ module.exports = {
         value: 'myCV.doc',
         name: 'selected-file',
         id: 'selected-file',
-        selectedFileText: 'Use my saved CV or upload a different one',
+        i18n: {
+          fallbackSelectedFileText: 'Use my saved CV or upload a different one',
+        },
       },
     },
   ],

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

@@ -5,9 +5,6 @@
     <div class="mds-form-field">
       {{ MdsFileUpload({
         labelText: labelText,
-        buttonText: buttonText,
-        defaultFileText: defaultFileText,
-        removeButtonText: removeButtonText,
         hideLabel: hideLabel,
         name: name,
         id: id,
@@ -21,7 +18,7 @@
         classes: classes,
         tooltipMessage: tooltipMessage,
         fileTypes: fileTypes,
-        selectedFileText: selectedFileText
+        i18n: i18n
       }) }}
     </div>
   </div>

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

@@ -16,6 +16,12 @@
 - `inputClasses`: add extra classes to the inner input element - **optional**
 - `placeholder`: add a placeholder to the input **optional**
 **(please see accessibility notes below regarding the use of this parameter)**
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon (label)
+}
+```
 
 ## Accessibility
 

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

@@ -13,7 +13,8 @@
     hideLabel: params.hideLabel,
     inputId: params.id,
     optional: params.optional,
-    tooltipMessage: params.tooltipMessage
+    tooltipMessage: params.tooltipMessage,
+    i18n: params.i18n
   }) }}
   {{ MdsInputMessages({
     id: params.id,

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

@@ -1,6 +1,5 @@
 module.exports = {
   title: 'Input',
-  status: 'wip',
   context: {
     labelText: 'Text input',
     name: 'Example input',

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

@@ -7,6 +7,12 @@
 - `element`: Which element type this label should be (legend/label | default: label) **optional**
 - `hideLabel`: true/false - Add this parameter if you need to visually hide the label. The text of the label will the used by default as a placeholder, unless overridden by the placeholder parameter **optional**
 **(please see accessibility notes below regarding the use of this parameter)**
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon
+}
+```
 
 ## Accessibility
 Avoid using `hideLabel` if you can. Only hide the label when there can be no mistake as to what the input is for, probably when there is only one input in the form.

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

@@ -18,7 +18,7 @@
       {{ MdsIcon({
         iconName: 'asterisk',
         classes: 'mds-form-label__required',
-        visuallyHiddenLabel: 'required'
+        visuallyHiddenLabel: params.i18n.requiredIcon | default('required')
       }) }}
   {%- endif -%}
 {%- if params.element == 'legend' -%}
@@ -34,7 +34,7 @@
     text: MdsIcon({
       iconName: 'question-mark',
       classes: 'mds-icon--info',
-      visuallyHiddenLabel: 'More info'
+      visuallyHiddenLabel: params.i18n.tooltipIcon | default('More info')
     }),
     placement: 'right',
     classes: 'mds-button mds-button--plain mds-form-label__tooltip',

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

@@ -1,6 +1,5 @@
 module.exports = {
   title: 'Label',
-  status: 'wip',
   context: {
     labelText: 'This is a test label',
   },

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

@@ -11,6 +11,12 @@
 - `classes`: add extra classes to the fieldgroup - **optional**
 - `options`: This is an array of objects containing the parameters for each option: `labelText`, `value`, `id`, `classes`
 - `value`: Value to preselect
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon (label)
+}
+```
 
 **Note:** `id` in `options` is optional. If you don't specify one, an id will be created for you using the name/id of the field and the value of the option.
 

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

@@ -15,7 +15,8 @@
         hideLabel: params.hideLabel,
         inputId: params.id,
         optional: params.optional,
-        tooltipMessage: params.tooltipMessage
+        tooltipMessage: params.tooltipMessage,
+        i18n: params.i18n
     }) }}
     {{ MdsInputMessages({
       id: params.id,

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

@@ -1,6 +1,5 @@
 module.exports = {
   title: 'Radio',
-  status: 'wip',
   context: {
     id: 'radio-input',
     labelText: 'Standard Radio group',

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

@@ -12,10 +12,16 @@
 - `state`: The current state of the input, currently the only allowed value is `error` **optional**,
 - `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
 - `classes`: add extra classes to the trigger - **optional**
-- `defaultHide`: remove default disabled option - **optional**
-- `defaultLabel`: text for default option - **optional**
+- `hideDefault`: remove default disabled option - **optional**
 - `value`: A default value to have selected as an option
 - `options`: This is an object of all options. The valid keys are `labelText` and `value`
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon (label)
+  defaultOptionLabel: 'Please select', // text for default option - won't display if hideDefault parameter is set
+}
+```
 
 ## Accessibility
 

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

@@ -19,7 +19,8 @@
     hideLabel: params.hideLabel,
     inputId: params.id,
     optional: params.optional,
-    tooltipMessage: params.tooltipMessage
+    tooltipMessage: params.tooltipMessage,
+    i18n: params.i18n
   }) }}
   {{ MdsInputMessages({
     id: params.id,
@@ -34,16 +35,9 @@
     {% endif -%}
     class="mds-form-control"
   >
-    {% if not params.defaultHide -%}
-      {%- set defaultLabel -%}
-        {%- if params.defaultLabel -%}
-          {{params.defaultLabel}}
-        {%- else -%}
-          Please select
-        {%- endif -%}
-      {%- endset -%}
+    {% if not params.hideDefault -%}
       <option {%- if not params.value %} selected="selected"{% endif %} value="">
-        {{ defaultLabel | safe }}
+        {{- params.i18n.defaultOptionLabel | default('Please select') | safe -}}
     </option>
     {%- endif %}
     {%- for option in params.options %}

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

@@ -1,6 +1,5 @@
 module.exports = {
   title: 'Select',
-  status: 'wip',
   context: {
     labelText: 'Select input',
     name: 'Select input',
@@ -53,7 +52,7 @@ module.exports = {
         name: 'Default option hidden',
         id: 'default-option-hidden',
         optional: true,
-        defaultHide: true,
+        hideDefault: true,
         options: [
           {
             labelText: 'Option 1',
@@ -77,7 +76,6 @@ module.exports = {
         name: 'Default option custom',
         id: 'default-option-custom',
         optional: true,
-        defaultLabel: 'All',
         options: [
           {
             labelText: 'Option 1',
@@ -92,6 +90,9 @@ module.exports = {
             value: 'option-3',
           },
         ],
+        i18n: {
+          defaultOptionLabel: 'All',
+        },
       },
     },
   ],