From b29f72582ea16444bfa5106ed1e697bb7e468915 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Wed, 1 Jun 2022 12:22:25 +1000
Subject: [PATCH] chore(#427): update language switcher block

---
 components/druxt/block-region/Header.vue | 11 +++++-
 components/druxt/block/LanguageBlock.vue | 29 +++++++++++----
 package-lock.json                        | 46 ++++++++++++++++--------
 package.json                             |  1 +
 4 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/components/druxt/block-region/Header.vue b/components/druxt/block-region/Header.vue
index 1ebd845f..badc52ef 100644
--- a/components/druxt/block-region/Header.vue
+++ b/components/druxt/block-region/Header.vue
@@ -8,7 +8,9 @@
     <b-collapse id="nav-collapse" class="ml-auto" is-nav>
       <b-navbar-nav class="ml-auto">
         <DruxtBlockLanguageBlock />
-        <b-nav-item v-b-toggle.search>Search</b-nav-item>
+        <b-nav-item>
+          <b-button v-b-toggle.search class="border bg-white text-secondary"><BIconSearch /></b-button>
+        </b-nav-item>
       </b-navbar-nav>
 
       <!-- Main menu -->
@@ -22,3 +24,10 @@
     </b-collapse>
   </b-container>
 </template>
+
+<script>
+import { BIconSearch } from 'bootstrap-vue'
+export default {
+  components: { BIconSearch },
+}
+</script>
diff --git a/components/druxt/block/LanguageBlock.vue b/components/druxt/block/LanguageBlock.vue
index 236ef0be..d0c6047b 100644
--- a/components/druxt/block/LanguageBlock.vue
+++ b/components/druxt/block/LanguageBlock.vue
@@ -1,13 +1,20 @@
 <template>
-  <b-nav-item-dropdown
-    v-if="!$fetchState.pending"
-    :text="selected"
-  >
+  <b-nav-item-dropdown v-if="!$fetchState.pending">
+    <template #button-content>
+      <CountryFlag
+        :country="country(selected.attributes.drupal_internal__id)"
+      />
+    </template>
     <b-dropdown-item
       v-for="language of languages.filter((o) => o.attributes.drupal_internal__id !== 'und')"
       :key="language.attributes.drupal_internal__id"
       :to="`/${language.attributes.drupal_internal__id}`"
     >
+      <CountryFlag
+        class="align-bottom"
+        :country="country(language.attributes.drupal_internal__id)"
+      />
+
       {{ language.attributes.label }}
     </b-dropdown-item>
   </b-nav-item-dropdown>
@@ -19,7 +26,11 @@
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 import { DruxtBlocksBlockMixin } from 'druxt-blocks'
 
+import CountryFlag from 'vue-country-flag'
+
 export default {
+  components: { CountryFlag },
+
   mixins: [DruxtBlocksBlockMixin],
 
   data: () => ({
@@ -39,8 +50,14 @@ export default {
 
   computed: {
     selected: ({ $route, languages }) => ($route.meta || {}).langcode
-      ? (languages.find((o) => o.attributes.drupal_internal__id === $route.meta.langcode).attributes || {}).label || ''
-      : ((languages.find((o) => o.attributes.drupal_internal__id === ((languages.find((o) => o.attributes.drupal_internal__id === 'und') || {}).attributes || {}).langcode) || {}).attributes || {}).label || '',
+      ? languages.find((o) => o.attributes.drupal_internal__id === $route.meta.langcode)
+      : (languages.find((o) => o.attributes.drupal_internal__id === ((languages.find((o) => o.attributes.drupal_internal__id === 'und') || {}).attributes || {}).langcode) || {}),
+  },
+
+  methods: {
+    country: (iso) => (Object.entries({
+      en: 'gb'
+    }).filter(([k, v]) => k === iso)).map(([k, v]) => v).pop() || iso
   }
 }
 </script>
diff --git a/package-lock.json b/package-lock.json
index 666f4d36..99c4b971 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "druxt-site": "^0.12.0",
         "jsonapi-serializer": "3.6.7",
         "nuxt": "2.15.8",
+        "vue-country-flag": "^2.3.2",
         "vue-json-pretty": "1.8.3",
         "vue-live": "1.17.2",
         "vuex": "3.6.2",
@@ -14260,9 +14261,9 @@
       }
     },
     "node_modules/druxt": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/druxt/-/druxt-0.19.0.tgz",
-      "integrity": "sha512-RE+yEqr72sXArVcORrUEz0VIzs3DqTZNLYZJxo8JzarMsqXNUOf06KRDZhcRPHWPkyv1lSqZkldQyesjAukNsQ==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/druxt/-/druxt-0.19.2.tgz",
+      "integrity": "sha512-h/N5F9rEkyA3mOjF9TsLZLByGqOevWkcwKw5jy0NHUEg62n2mK3sse0k5sPuHEunYYgm8UFBHucC8cAJ8GDa1w==",
       "dependencies": {
         "@nuxtjs/axios": "^5.13.6",
         "@nuxtjs/proxy": "^2.1.0",
@@ -14387,11 +14388,11 @@
       }
     },
     "node_modules/druxt-router": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/druxt-router/-/druxt-router-0.27.0.tgz",
-      "integrity": "sha512-ZkwVo9nG6UAqaa/XTX2E3MsnMEz//4/q4MTf7TckPouCosu5/t4zAVyvjt6H4UO30wHkYe75XNrFx3AiULBkRg==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/druxt-router/-/druxt-router-0.27.3.tgz",
+      "integrity": "sha512-aa0WfKWuxkGD+kR7TNdgqE5c+PN5Mn1Dldt3yhXerh5sbkTqOIpR1KrsnBZVjoXQrTKOQHTFsyXa9lUiVuLPdg==",
       "dependencies": {
-        "druxt": "^0.19.0",
+        "druxt": "^0.19.2",
         "url-parse": "^1.5.10"
       },
       "optionalDependencies": {
@@ -35844,6 +35845,17 @@
       "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.1.0.tgz",
       "integrity": "sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA=="
     },
+    "node_modules/vue-country-flag": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/vue-country-flag/-/vue-country-flag-2.3.2.tgz",
+      "integrity": "sha512-YhSS+GbLT9tp8tjMXxJKlqpBUd6dbhQJrttKj8ZbHtBocorIomFDMVMxraWVMs3hxaCW6SsAYaREkoYM00ORiA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.12"
+      }
+    },
     "node_modules/vue-docgen-api": {
       "version": "4.43.0",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.43.0.tgz",
@@ -49139,9 +49151,9 @@
       }
     },
     "druxt": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/druxt/-/druxt-0.19.0.tgz",
-      "integrity": "sha512-RE+yEqr72sXArVcORrUEz0VIzs3DqTZNLYZJxo8JzarMsqXNUOf06KRDZhcRPHWPkyv1lSqZkldQyesjAukNsQ==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/druxt/-/druxt-0.19.2.tgz",
+      "integrity": "sha512-h/N5F9rEkyA3mOjF9TsLZLByGqOevWkcwKw5jy0NHUEg62n2mK3sse0k5sPuHEunYYgm8UFBHucC8cAJ8GDa1w==",
       "requires": {
         "@nuxtjs/axios": "^5.13.6",
         "@nuxtjs/proxy": "^2.1.0",
@@ -49267,11 +49279,11 @@
       }
     },
     "druxt-router": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/druxt-router/-/druxt-router-0.27.0.tgz",
-      "integrity": "sha512-ZkwVo9nG6UAqaa/XTX2E3MsnMEz//4/q4MTf7TckPouCosu5/t4zAVyvjt6H4UO30wHkYe75XNrFx3AiULBkRg==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/druxt-router/-/druxt-router-0.27.3.tgz",
+      "integrity": "sha512-aa0WfKWuxkGD+kR7TNdgqE5c+PN5Mn1Dldt3yhXerh5sbkTqOIpR1KrsnBZVjoXQrTKOQHTFsyXa9lUiVuLPdg==",
       "requires": {
-        "druxt": "^0.19.0",
+        "druxt": "^0.19.2",
         "url-parse": "^1.5.10",
         "vue": "^2.6.14",
         "vuex": "^3.6.2"
@@ -65921,6 +65933,12 @@
       "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.1.0.tgz",
       "integrity": "sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA=="
     },
+    "vue-country-flag": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/vue-country-flag/-/vue-country-flag-2.3.2.tgz",
+      "integrity": "sha512-YhSS+GbLT9tp8tjMXxJKlqpBUd6dbhQJrttKj8ZbHtBocorIomFDMVMxraWVMs3hxaCW6SsAYaREkoYM00ORiA==",
+      "requires": {}
+    },
     "vue-docgen-api": {
       "version": "4.43.0",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.43.0.tgz",
diff --git a/package.json b/package.json
index b4154438..3319778b 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "druxt-site": "^0.12.0",
     "jsonapi-serializer": "3.6.7",
     "nuxt": "2.15.8",
+    "vue-country-flag": "^2.3.2",
     "vue-json-pretty": "1.8.3",
     "vue-live": "1.17.2",
     "vuex": "3.6.2",