🐛 Fix HdPhoneInput component missing country flag icons (#1260)

* ➖ Remove flag-icons-svg

* ♻️ Fetch flag-icons-svg files from CDN instead of locally to ensure they show up in consuming projects

* 📸 Update outdated snapshots

package.json

@@ -45,7 +45,6 @@
     "body-scroll-lock": "3.1.5",
     "country-codes-list": "^1.6.8",
     "deepmerge": "^4.2.2",
-    "flag-icons-svg": "0.0.3",
     "homeday-assets": "^4.66.1",
     "lodash": "4.17.21",
     "vue": "2.7.13",

src/components/form/HdInputPhone.vue

@@ -317,9 +317,25 @@ export default {
 <style lang="scss" scoped>
 @import 'homeday-blocks/src/styles/mixins.scss';
 
-$flag-icons-path: '~flag-icons-svg/svg';
-@import '~flag-icons-svg/sass/_variables.scss';
-@import '~flag-icons-svg/sass/flag-icons.scss';
+$flag-icons-path: 'https://cdn.jsdelivr.net/npm/[email protected]/svg';
+
+$flag-icons-countries: (
+  'ad' 'ae' 'af' 'ag' 'ai' 'al' 'am' 'ao' 'ar' 'as' 'at' 'au' 'aw' 'ax' 'az' 'ba' 'bb' 'bd' 'be'
+    'bf' 'bg' 'bh' 'bi' 'bj' 'bl' 'bm' 'bn' 'bo' 'br' 'bs' 'bt' 'bv' 'bw' 'by' 'bz' 'ca' 'cc' 'cd'
+    'cf' 'cg' 'ch' 'ci' 'ck' 'cl' 'cm' 'cn' 'co' 'cr' 'cu' 'cv' 'cw' 'cx' 'cy' 'cz' 'de' 'dj' 'dk'
+    'dm' 'do' 'dz' 'ec' 'ee' 'eg' 'er' 'es' 'et' 'eu' 'fi' 'fj' 'fk' 'fm' 'fo' 'fr' 'ga' 'gb-eng'
+    'gb-nir' 'gb-sct' 'gb-wls' 'gb-zet' 'gb' 'gd' 'ge' 'gf' 'gg' 'gh' 'gi' 'gl' 'gm' 'gn' 'gp' 'gq'
+    'gr' 'gs' 'gt' 'gu' 'gw' 'gy' 'hk' 'hm' 'hn' 'hr' 'ht' 'hu' 'id' 'ie' 'il' 'im' 'in' 'io' 'iq'
+    'ir' 'is' 'it' 'je' 'jm' 'jo' 'jp' 'ke' 'kg' 'kh' 'ki' 'km' 'kn' 'kp' 'kr' 'kw' 'ky' 'kz' 'la'
+    'lb' 'lc' 'li' 'lk' 'lr' 'ls' 'lt' 'lu' 'lv' 'ly' 'ma' 'mc' 'md' 'me' 'mf' 'mg' 'mh' 'mk' 'ml'
+    'mm' 'mn' 'mo' 'mp' 'mq' 'mr' 'ms' 'mt' 'mu' 'mv' 'mw' 'mx' 'my' 'mz' 'na' 'nc' 'ne' 'nf' 'ng'
+    'ni' 'nl' 'no' 'np' 'nr' 'nu' 'nz' 'om' 'pa' 'pe' 'pf' 'pg' 'ph' 'pk' 'pl' 'pm' 'pn' 'pr' 'ps'
+    'pt' 'pw' 'py' 'qa' 're' 'ro' 'rs' 'ru' 'rw' 'sa' 'sb' 'sc' 'sd' 'se' 'sg' 'sh' 'si' 'sj' 'sk'
+    'sl' 'sm' 'sn' 'so' 'sr' 'ss' 'st' 'sv' 'sx' 'sy' 'sz' 'tc' 'td' 'tf' 'tg' 'th' 'tj' 'tk' 'tl'
+    'tm' 'tn' 'to' 'tr' 'tt' 'tv' 'tw' 'tz' 'ua' 'ug' 'um' 'us-ca' 'us' 'uy' 'uz' 'va' 'vc' 've'
+    'vg' 'vi' 'vn' 'vu' 'wf' 'ws' 'xk' 'ye' 'yt' 'za' 'zm' 'zw'
+);
+$flag-icons-elements: join($flag-icons-countries, comma);
 
 $dropdown-button-width: 74px;
 $dropdown-button-height: 55px;
@@ -423,5 +439,28 @@ $dropdown-button-height: 55px;
       margin: 0;
     }
   }
+
+  span.flag-icon {
+    display: inline-block;
+    vertical-align: middle;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    line-height: 1em;
+    height: 1em;
+    width: (21 / 15) * 1em;
+    background-image: url(#{$flag-icons-path}/missing.svg);
+
+    &:before {
+      content: '\00a0';
+    }
+
+    // Flags
+    @each $element in $flag-icons-elements {
+      &.flag-icon-#{$element} {
+        background-image: url('#{$flag-icons-path}/#{$element}.svg');
+      }
+    }
+  }
 }
 </style>

tests/unit/components/buttons/__snapshots__/HdArrowButton.spec.js.snap

@@ -2,6 +2,5 @@
 
 exports[`HdArrowButton renders component 1`] = `
 <button autocomplete="off" type="button" class="arrowButton arrowButton--right">
-  <!---->
-</button>
+  <!----></button>
 `;

tests/unit/components/buttons/__snapshots__/HdButton.spec.js.snap

@@ -9,44 +9,37 @@ exports[`HdButton can be used as an icon button 1`] = `
 
 exports[`HdButton should render component with \`btn\` class 1`] = `
 <button class="btn btn--primary">
-  <!----> <span class="btn__content"><span>Button text</span></span>
-</button>
+  <!----> <span class="btn__content"><span>Button text</span></span></button>
 `;
 
 exports[`HdButton should render component with btn--dark-background class if prop isInDarkBackground is true 1`] = `
 <button class="btn btn--primary btn--dark-background">
-  <!----> <span class="btn__content"><span>Button text</span></span>
-</button>
+  <!----> <span class="btn__content"><span>Button text</span></span></button>
 `;
 
 exports[`HdButton should render component with btn--flat class 1`] = `
 <button class="btn btn--flat">
-  <!----> <span class="btn__content"><span>Button text</span></span>
-</button>
+  <!----> <span class="btn__content"><span>Button text</span></span></button>
 `;
 
 exports[`HdButton should render component with btn--ghost class 1`] = `
 <button class="btn btn--ghost">
-  <!----> <span class="btn__content"><span>Button text</span></span>
-</button>
+  <!----> <span class="btn__content"><span>Button text</span></span></button>
 `;
 
 exports[`HdButton should render component with btn--primary class 1`] = `
 <button class="btn btn--primary">
-  <!----> <span class="btn__content"><span>Button text</span></span>
-</button>
+  <!----> <span class="btn__content"><span>Button text</span></span></button>
 `;
 
 exports[`HdButton should render component with btn--secondary class 1`] = `
 <button class="btn btn--secondary">
-  <!----> <span class="btn__content"><span>Button text</span></span>
-</button>
+  <!----> <span class="btn__content"><span>Button text</span></span></button>
 `;
 
 exports[`HdButton should render component with btn--tertiary class 1`] = `
 <button class="btn btn--tertiary">
-  <!----> <span class="btn__content"><span>Button text</span></span>
-</button>
+  <!----> <span class="btn__content"><span>Button text</span></span></button>
 `;
 
 exports[`HdButton should render the icon passed as prop 1`] = `

tests/unit/components/form/__snapshots__/HdDynamicForm.spec.js.snap

@@ -34,8 +34,7 @@ exports[`HdDynamicForm renders slots 1`] = `
   <div>The before button slot</div> <button class="dynamicForm__submit btn btn--primary">
     <!----> <span class="btn__content">
     submit
-  </span>
-  </button>
+  </span></button>
   <div>The after slot</div>
 </form>
 `;

tests/unit/components/form/__snapshots__/HdInputPassword.spec.js.snap

@@ -8,8 +8,7 @@ exports[`HdInputPassword is rendered as expected 1`] = `
         test label
       </label>
       <div class="field__input-right"><button type="button" class="password-input__visibility-toggle">
-          <!---->
-        </button></div>
+          <!----></button></div>
       <div class="field__border"></div>
     </div>
     <p class="field__helper">‍</p>

tests/unit/components/form/__snapshots__/HdInputPhone.spec.js.snap

@@ -2,8 +2,7 @@
 
 exports[`HdInputPhone is rendered as expected 1`] = `
 <div class="phone-input"><button aria-haspopup="listbox" aria-label="Wählen Sie einen Ländercode:" aria-activedescendant="+49, Deutschland" class="phone-input__selector"><span class="phone-input__selector__flag flag-icon flag-icon-de"></span>
-    <!---->
-  </button>
+    <!----></button>
   <ul tabindex="-1" role="listbox" aria-label="Telefonnummer" class="phone-input__dropdown" style="display: none;">
     <li id="AD" role="option" class="phone-input__dropdown__option"><button class="option"><span class="option__flag flag-icon flag-icon-ad"></span>
         <p><span class="option__name">Andorra</span> <span class="option__dial-code">+376</span></p>

tests/unit/components/form/__snapshots__/HdPasswordConfirm.spec.js.snap

@@ -9,8 +9,7 @@ exports[`HdPasswordConfirm is rendered as expected 1`] = `
           Ihr Passwort
         </label>
         <div class="field__input-right"><button type="button" class="password-input__visibility-toggle">
-            <!---->
-          </button></div>
+            <!----></button></div>
         <div class="field__border"></div>
       </div>
       <p class="field__helper">‍</p>

tests/unit/components/form/__snapshots__/HdRange.spec.js.snap

@@ -14,8 +14,7 @@ exports[`HdRange Labels renders 1`] = `
     </button><button type="button" class="range__step">
       <p class="range__step-label">label4</p>
     </button><button type="button" class="range__step">
-      <!---->
-    </button></div>
+      <!----></button></div>
   <div class="range__thumb" style="transform: translateX(0px);">
     <!---->
     <div class="range__thumb__inner">
@@ -31,16 +30,11 @@ exports[`HdRange renders as expected 1`] = `
     <div class="range__progress" style="transform: scaleX(0.5);"></div>
   </div>
   <div class="range__steps"><button type="button" class="range__step">
-      <!---->
-    </button><button type="button" class="range__step">
-      <!---->
-    </button><button type="button" class="range__step">
-      <!---->
-    </button><button type="button" class="range__step">
-      <!---->
-    </button><button type="button" class="range__step">
-      <!---->
-    </button></div>
+      <!----></button><button type="button" class="range__step">
+      <!----></button><button type="button" class="range__step">
+      <!----></button><button type="button" class="range__step">
+      <!----></button><button type="button" class="range__step">
+      <!----></button></div>
   <div class="range__thumb" style="transform: translateX(0px);">
     <!---->
     <div class="range__thumb__inner">

tests/unit/components/form/__snapshots__/HdTagsSelector.spec.js.snap

@@ -5,16 +5,13 @@ exports[`HdTagsSelector The component is rendered 1`] = `
   <section class="tags-selector__selected-tags">
     <div class="tags-selector__selected-tags__tag">
       <div class="tags-selector__selected-tags__tag__label">Jon "Snow"</div> <button class="tags-selector__selected-tags__tag__remove">
-        <!---->
-      </button>
+        <!----></button>
     </div>
     <div class="tags-selector__selected-tags__tag">
       <div class="tags-selector__selected-tags__tag__label">Daenerys</div> <button class="tags-selector__selected-tags__tag__remove">
-        <!---->
-      </button>
+        <!----></button>
     </div> <button class="tags-selector__selected-tags__panel-toggle">
-      <!---->
-    </button>
+      <!----></button>
   </section>
   <section class="tags-selector__panel">
     <div class="tags-selector__panel__tag tags-selector__panel__tag--isSelected">

tests/unit/components/gallery/__snapshots__/HDGallery.spec.js.snap

@@ -21,10 +21,8 @@ exports[`HdGallery renders the component 1`] = `
         </div>
       </div>
       <div class="gallery__controls"><button type="button" class="gallery__controls-prev isDisabled">
-          <!---->
-        </button> <button type="button" class="gallery__controls-next">
-          <!---->
-        </button></div>
+          <!----></button> <button type="button" class="gallery__controls-next">
+          <!----></button></div>
       <p class="gallery__info">1/10</p>
     </div>
   </figure>