ONL 6280 - phone number input field (#1035)

* ONL-6280:chore:background work to other inputs

* ONL-6280:feat:obfuscate util

* ONL-6280:feat:phone-number-component

* ONL-6280:chore:cypress snaps

* ONL-6280:chore:change event story

* ONL-6280:feat:hide spinners for number input

* ONL-6280:chore:add svg country flags for use in the phone number input

* ONL-6280:feat:webpack change to prebuild assets and make them available in production

* ONL-6280:feat:sort alphabetically, bottom slot, country images in the dropdown and story update

* ONL-6280:chome:wrap up changes in naming, tests, behaviour

* ONL-6280:chore:linting issues and extra margin

* ONL-6280:fix tests

* ONL-6280:fix tests

* ONL-6280:fix tests

* ONL-6280:do not render image if country code issue

* ONL-6280:test:unit update

* ONL-6280:test:unit update

* ONL-6280:chore:pr comments

* ONL-6280:chore:pr comments

* ONL-6280:chore:pr comments

* ONL-6280:refactor:code after pr comments

* ONL-6280:refactor:code after pr comments

* ONL-6280:chore:update vi snaps

* ONL-6280:chore:small tests amends

* 1.9.4

.storybook/main.js

@@ -35,6 +35,25 @@ module.exports = {
     }));
     const babelRule = config.module.rules[0];
     babelRule.exclude = /node_modules\/(?!(css-tree|color)\/).*/;
+
+    const fileLoaderRule = config.module.rules.find(rule => rule.loader?.includes('/file-loader/'));
+    if (!fileLoaderRule) {
+      throw new Error('Unable to find file loader rules in the webpack config. Configuration change?');
+    }
+    const fileLoaderOutputName = fileLoaderRule.options.name;
+    if (!fileLoaderOutputName) {
+      throw new Error('Unable to find file loader output name in the webpack config. Configuration change?');
+    }
+    fileLoaderRule.options = {
+      ...fileLoaderRule.options,
+      name(resourcePath) {
+        const match = resourcePath.match(/\/svg-country-flags\/png(?<size>[0-9]+)px\//);
+        if (match) {
+          return `icons/country-flags/${match.groups.size}/[name].[ext]`;
+        }
+        return fileLoaderOutputName;
+      },
+    };
     return config;
   },
 };

jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
     '^.+\\.jsx?$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    '/node_modules/',
+    'node_modules/(?!(svg-country-flags)/)',
   ],
   snapshotSerializers: [
     'jest-serializer-vue',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
@@ -37,6 +37,7 @@
     "clipboard-copy": "3.2.0",
     "focus-trap": "6.6.1",
     "mitt": "3.0.0",
+    "svg-country-flags": "1.2.10",
     "tailwindcss": "2.2.19",
     "v-tooltip": "2.1.3",
     "vue": "2.6.14",

src/components/ec-input-field/ec-input-field.spec.js

@@ -116,6 +116,22 @@ describe('EcInputField', () => {
     expect(wrapper.findByDataTest('ec-input-field__input').element.value).toBe('some text');
   });
 
+  it('should set the v-model on the value of the input when type is "tel" and change when it changes', async () => {
+    const wrapper = mountInputFieldAsTemplate(
+      '<ec-input-field v-model="text" type="tel" />',
+      {},
+      {
+        data() {
+          return { text: '' };
+        },
+      },
+    );
+
+    expect(wrapper.findByDataTest('ec-input-field__input').element.value).toBe('');
+    await wrapper.setData({ text: '123456789' });
+    expect(wrapper.findByDataTest('ec-input-field__input').element.value).toBe('123456789');
+  });
+
   it('should emit the value when you write on the input', () => {
     const wrapper = mountInputFieldAsTemplate(
       '<ec-input-field v-model="text" type="text" />',

src/components/ec-input-field/ec-input-field.vue

@@ -95,7 +95,7 @@ export default {
       type: String,
       default: 'text',
       validator(value) {
-        return ['text', 'date', 'number'].includes(value);
+        return ['text', 'date', 'number', 'tel'].includes(value);
       },
     },
     value: {