From 2ada8cc102a53f437a0592174c28363b1ef01f9d Mon Sep 17 00:00:00 2001
From: Cedric Nicoloso <cedric.nicoloso@gmail.com>
Date: Tue, 5 Sep 2017 21:48:23 +1000
Subject: [PATCH] Use 'flag-icon-css' lib for small flag icons

---
 client/package.json                           |  1 +
 client/src/components/JobCard.vue             | 36 ++++++++--------
 client/static/flags/Australia.svg             | 26 ------------
 client/static/flags/Maroc.svg                 | 19 ---------
 client/static/flags/Suisse.svg                | 10 -----
 .../unit/specs/components/JobCard.spec.js     | 41 +++++++++++++++++--
 6 files changed, 57 insertions(+), 76 deletions(-)
 delete mode 100644 client/static/flags/Australia.svg
 delete mode 100644 client/static/flags/Maroc.svg
 delete mode 100644 client/static/flags/Suisse.svg

diff --git a/client/package.json b/client/package.json
index 4092457..af75e08 100644
--- a/client/package.json
+++ b/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"
   },
diff --git a/client/src/components/JobCard.vue b/client/src/components/JobCard.vue
index 0d88c05..504d241 100644
--- a/client/src/components/JobCard.vue
+++ b/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;
diff --git a/client/static/flags/Australia.svg b/client/static/flags/Australia.svg
deleted file mode 100644
index 331e447..0000000
--- a/client/static/flags/Australia.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="1280"
-  height="640"
-  viewBox="5000 0 15120 15120"
->
-  <defs id="defs6">
-    <polygon points="0,-9 1.735535,-3.6038755 7.0364833,-5.6114082 3.8997116,-0.89008374 8.7743512,2.0026884 3.1273259,2.4939592 3.9049537,8.1087198 0,4 -3.9049537,8.1087198 -3.1273259,2.4939592 -8.7743512,2.0026884 -3.8997116,-0.89008374 -7.0364833,-5.6114082 -1.735535,-3.6038755 0,-9 " id="Star7"/>
-    <polygon points="0,-9 2.351141,-3.236068 8.5595086,-2.7811529 3.8042261,1.236068 5.2900673,7.2811529 0,4 -5.2900673,7.2811529 -3.8042261,1.236068 -8.5595086,-2.7811529 -2.351141,-3.236068 0,-9 " id="Star5"/>
-  </defs>
-  <path d="M 0,0 L 30240,0 L 30240,15120 L 0,15120 L 0,0 z" style="fill:#00008b"/>
-  <use transform="matrix(252,0,0,252,7560,11340)" id="Commonwealth_Star" style="fill:#fff" xlink:href="#Star7"/>
-  <use transform="matrix(120,0,0,120,22680,12600)" id="Star_Alpha_Crucis" style="fill:#fff" xlink:href="#Star7"/>
-  <use transform="matrix(120,0,0,120,18900,6615)" id="Star_Beta_Crucis" style="fill:#fff" xlink:href="#Star7"/>
-  <use transform="matrix(120,0,0,120,22680,2520)" id="Star_Gamma_Crucis" style="fill:#fff" xlink:href="#Star7"/>
-  <use transform="matrix(120,0,0,120,26040,5607)" id="Star_Delta_Crucis" style="fill:#fff" xlink:href="#Star7"/>
-  <use transform="matrix(70,0,0,70,24192,8190)" id="Star_Epsilon_Crucis" style="fill:#fff" xlink:href="#Star5"/>
-  <path d="M 6300,0 L 8820,0 L 8820,2520 L 15120,2520 L 15120,5040 L 8820,5040 L 8820,7560 L 6300,7560 L 6300,5040 L 0,5040 L 0,2520 L 6300,2520 L 6300,0 z" id="White_Cross" style="fill:#fff"/>
-  <path d="M 0,0 L 1690.4674,0 L 15120,6714.7663 L 15120,7560 L 13429.533,7560 L 0,845.2337 L 0,0 z" id="White_Diagonal" style="fill:#fff"/>
-  <use transform="matrix(-1,0,0,1,15120,0)" id="White_Diagonal_Flipped" style="fill:#fff" xlink:href="#White_Diagonal"/>
-  <path d="M 6804,0 L 8316,0 L 8316,3024 L 15120,3024 L 15120,4536 L 8316,4536 L 8316,7560 L 6804,7560 L 6804,4536 L 0,4536 L 0,3024 L 6804,3024 L 6804,0 z" id="Red_Cross" style="fill:red"/>
-  <path d="M 0,0 L 5040,2520 L 3913.0217,2520 L 0,563.48913 L 0,0 z M 15120,0 L 13993.022,0 L 8953.0217,2520 L 10080,2520 L 15120,0 z" id="Red_Diagonals" style="fill:red"/>
-  <use transform="matrix(-1,0,0,-1,15120,7560)" id="Red_Diagonals_Rotated" style="fill:red" xlink:href="#Red_Diagonals"/>
-</svg>
diff --git a/client/static/flags/Maroc.svg b/client/static/flags/Maroc.svg
deleted file mode 100644
index 4430fde..0000000
--- a/client/static/flags/Maroc.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="900"
-  height="600"
-  viewBox="-31 -28 60 60"
->
-  <rect y="-40" x="-60" height="80" width="120" style="fill: #c1272d"/>
-  <g
-    style="fill:#33cc66"
-    transform="matrix(0.4392946,0,0,0.4618638,-84.342931,-57.008939)"
-  >
-    <path d="M 181.25,113.1875 L 146.46875,113.21875 L 186.0625,141.96875 L 192,137.65625 L 168,120.21875 L 178.96875,120.1875 L 181.25,113.1875 z"/>
-    <path d="M 202.76559,113.19883 L 191.98787,80.129551 L 176.88014,126.66968 L 182.81636,130.98395 L 191.984,102.77011 L 195.40325,113.19235 L 202.76559,113.19883 z"/>
-    <path d="M 209.40356,133.66496 L 237.52382,113.19577 L 188.59298,113.20916 L 186.32426,120.18802 L 215.99017,120.18841 L 207.13464,126.66096 L 209.40356,133.66496 z"/>
-    <path d="M 191.99045,146.30222 L 220.14744,166.72085 L 205.01425,120.18899 L 197.67588,120.1879 L 206.84278,148.40198 L 197.95051,141.97999 L 191.99045,146.30222 z"/>
-    <path d="M 174.59078,133.64658 L 163.8725,166.73517 L 203.45052,137.96351 L 201.18387,130.98397 L 177.18341,148.42084 L 180.54323,137.97929 L 174.59078,133.64658 z"/>
-  </g>
-</svg>
diff --git a/client/static/flags/Suisse.svg b/client/static/flags/Suisse.svg
deleted file mode 100644
index cb8fca4..0000000
--- a/client/static/flags/Suisse.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="320"
-  height="320"
->
-  <rect fill="#D52B1E" height="320" width="320"/>
-  <rect fill="#fff" height="60" width="200" x="60" y="130"/>
-  <rect fill="#fff" height="200" width="60" x="130" y="60"/>
-</svg>
diff --git a/client/test/unit/specs/components/JobCard.spec.js b/client/test/unit/specs/components/JobCard.spec.js
index ecadf63..45c4def 100644
--- a/client/test/unit/specs/components/JobCard.spec.js
+++ b/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');
     });
   });