Use 'flag-icon-css' lib for small flag icons

client/package.json

@@ -18,6 +18,7 @@
     "lint:fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "flag-icon-css": "^2.8.0",
     "vue": "^2.3.4",
     "vue-router": "^2.6.0"
   },

client/src/components/JobCard.vue

@@ -7,7 +7,7 @@
         <div class="job__profile">
           <h2 class="job__title" :class="jobFlagClass">{{ job.activity.title }}</h2>
           <div class="job__country-logo" v-if="showCountryLogo">
-            <img class="job__country-image" :src="countrySrc" />
+            <span class="flag-icon" :class="countryFlagClass"></span>
           </div>
         </div>
 
@@ -55,6 +55,7 @@
 
 <script>
   import moment from 'moment';
+  import 'flag-icon-css/css/flag-icon.css';
   import interestsApi from '@/api/interests';
   import authenticationService from '@/services/authentication';
   import countries from '@/utils/countries';
@@ -120,8 +121,18 @@
         return classes;
       },
 
-      countrySrc() {
-        return `../static/flags/${this.job.project.customer.sector.name}.svg`;
+      countryFlagClass() {
+        const countryName = this.job.project.customer.sector.name;
+        if (countryName === 'Australia') {
+          return 'flag-icon-au';
+        }
+        if (countryName === 'Maroc') {
+          return 'flag-icon-ma';
+        }
+        if (countryName === 'Suisse') {
+          return 'flag-icon-ch';
+        }
+        return 'flag-icon-fr';
       },
 
       showCountryLogo() {
@@ -225,27 +236,18 @@
     color: #07c;
   }
 
+  .job__country-logo {
+    margin: 0 5px 0 10px;
+  }
+
   .job__title--with-flags {
-    padding-left: 20px;
+    padding-left: 26px;
   }
 
   .job__link:hover .job__title {
     text-decoration: underline;
   }
 
-  .job__country-logo {
-    flex: 0;
-    width: 40px;
-    height: 1px;
-  }
-
-  .job__country-image {
-    /*width: 25px;*/
-    height: 20px;
-    /*border-radius: 50%;*/
-    margin: 0 5px 0 0px;
-  }
-
   .job__separator {
     width: 15px;
     border: 1px solid;

client/test/unit/specs/components/JobCard.spec.js

@@ -349,16 +349,49 @@ describe('Unit | Component | JobCard.vue', () => {
     });
   });
 
-  describe('computed property #countrySrc', () => {
-    it('should return the sector name value', () => {
+  describe('computed property #countryFlagClass', () => {
+    it('should return the correct Australia flag class', () => {
+      // Given
+      job.project.customer.sector.name = 'Australia';
+
+      // When
+      const countrySrc = component.countryFlagClass;
+
+      // Then
+      expect(countrySrc).to.equal('flag-icon-au');
+    });
+
+    it('should return the correct Morocco flag class', () => {
+      // Given
+      job.project.customer.sector.name = 'Maroc';
+
+      // When
+      const countrySrc = component.countryFlagClass;
+
+      // Then
+      expect(countrySrc).to.equal('flag-icon-ma');
+    });
+
+    it('should return the correct flag class', () => {
       // Given
       job.project.customer.sector.name = 'Suisse';
 
       // When
-      const countrySrc = component.countrySrc;
+      const countrySrc = component.countryFlagClass;
+
+      // Then
+      expect(countrySrc).to.equal('flag-icon-ch');
+    });
+
+    it('should return the default France flag class', () => {
+      // Given
+      job.project.customer.sector.name = 'FR - Distribution';
+
+      // When
+      const countrySrc = component.countryFlagClass;
 
       // Then
-      expect(countrySrc).to.equal('../static/flags/Suisse.svg');
+      expect(countrySrc).to.equal('flag-icon-fr');
     });
   });