CSS issues

README.md

@@ -5,9 +5,9 @@ _Country flags as a Vue Component_
   <img src="https://github.com/P3trur0/vue-country-flag/blob/master/assets/logo.png?raw=true" alt="vue-country-flag"/>
 </p>
 <p align="center">
-  <img src="https://packagephobia.now.sh/[email protected].0" alt="Install size">
+  <img src="https://packagephobia.now.sh/[email protected].1" alt="Install size">
   <img src="https://img.shields.io/badge/Vue.js%202-compatible-green.svg" alt="Vue.js 2 compatible">
-  <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/npm-2.0.0-blue.svg" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/npm-2.0.1-blue.svg" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-country-flag"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
   <img src="https://img.shields.io/badge/TypeScript-supported-blue" alt="TypeScript Supported">
 

__tests__/CountryFlag.spec.js

@@ -271,6 +271,11 @@ const convertToISOAlphaThree = (country) => {
     return countriesMappings[country]
 };
 
+//see issue-27
+const convertAndorraTwoDigitsToAndorra = (country) => {
+    return (country === 'ad') ? 'andorra' : country
+}
+
 
 
 describe('CountryFlag', () => {
@@ -296,44 +301,44 @@ describe('CountryFlag', () => {
             const flag = shallowMount(CountryFlag, {
                 propsData: buildNormalFlag('it')
             });
-            expect(flag.attributes('class')).toBe('f f-it normal-flag');
+            expect(flag.attributes('class')).toBe('flag f-it normal-flag');
         })
 
         test('big size of country-flag should return a big flag', () => {
             const flag = shallowMount(CountryFlag, {
                 propsData: buildFlag('se', 'big')
             });
-            expect(flag.attributes('class')).toBe('f f-se big-flag');
+            expect(flag.attributes('class')).toBe('flag f-se big-flag');
         })
 
         test("big size of rounded country-flag should return a rounded big flag", () => {
           const flag = shallowMount(CountryFlag, {
             propsData: buildFlag("se", "big", true)
           });
           expect(flag.attributes("class")).toBe(
-            "f f-se rounded big-flag"
+            "flag f-se rounded big-flag"
           );
         });
 
         test('small size of country-flag should return a small flag', () => {
             const flag = shallowMount(CountryFlag, {
                 propsData: buildFlag('se', 'small')
             });
-            expect(flag.attributes('class')).toBe('f f-se small-flag');
+            expect(flag.attributes('class')).toBe('flag f-se small-flag');
         })
 
         test("normal size of country-flag should return a normal flag", () => {
           const flag = shallowMount(CountryFlag, {
             propsData: buildFlag("se", "normal")
           });
-          expect(flag.attributes("class")).toBe("f f-se normal-flag");
+          expect(flag.attributes("class")).toBe("flag f-se normal-flag");
         }),
 
         test("[CAPITAL LETTER lowercase conversion] normal size of country-flag should return a normal flag", () => {
             const flag = shallowMount(CountryFlag, {
               propsData: buildFlag("SE", "normal")
             });
-            expect(flag.attributes("class")).toBe("f f-se normal-flag");
+            expect(flag.attributes("class")).toBe("flag f-se normal-flag");
           });
     });
 
@@ -342,13 +347,13 @@ describe('CountryFlag', () => {
             const flag = shallowMount(CountryFlag, {
                 propsData: buildNormalFlag(convertToISOAlphaThree('it'))
             });
-            expect(flag.attributes('class')).toBe('f f-ita normal-flag');
+            expect(flag.attributes('class')).toBe('flag f-ita normal-flag');
         })
 
         test('it should map both two and three characters for all the countries', () => {
             for (let country in countriesMappings) {
                 if (countriesMappings.hasOwnProperty(country)) {
-                    let twoCharsIdentifier = country;
+                    let twoCharsIdentifier = convertAndorraTwoDigitsToAndorra(country);
                     let threeCharsIdentifier = countriesMappings[country];
 
                     const flagTwo = shallowMount(CountryFlag, {
@@ -359,8 +364,8 @@ describe('CountryFlag', () => {
                         propsData: buildNormalFlag(threeCharsIdentifier)
                     });
 
-                    expect(flagTwo.attributes('class')).toBe('f f-' + twoCharsIdentifier + ' normal-flag');
-                    expect(flagThree.attributes('class')).toBe('f f-' + threeCharsIdentifier + ' normal-flag');
+                    expect(flagTwo.attributes('class')).toBe('flag f-' + twoCharsIdentifier + ' normal-flag');
+                    expect(flagThree.attributes('class')).toBe('flag f-' + threeCharsIdentifier + ' normal-flag');
                 }
             }
         })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-country-flag",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Simple Vue component for displaying of country flags",
   "main": "dist/country-flag.ssr.js",
   "module": "dist/country-flag.esm.js",

src/CountryFlag.vue

@@ -27,13 +27,15 @@ export default {
   computed: {
     flagIconClass () {
       return {
-        [`f ${this.flagIconCountry}`]: true,
+        [`flag ${this.flagIconCountry}`]: true,
         [`rounded`]: this.rounded,
         [this.flagMargin]: true
       }
     },
     flagIconCountry () {
-      return `f-${this.country.toLowerCase()}`
+      let country = this.country.toLowerCase() 
+      country = (country === 'ad') ? 'andorra' : country
+      return `f-${country}`
     },
     flagMargin () {
       switch (this.size) {