Merge pull request #417 from minvws/feature/added-huawei-app-gallery-…

…information

Feature/added huawei app gallery information

README.development.md

@@ -32,6 +32,19 @@ To test locally with htmlproofer (to test validity of html-code):
 bundle exec htmlproofer ./_site --checks-to-ignore=LinkCheck
 ```
 
+### App store buttons
+
+On a mobile device the appropriate (store) buttons should be shown.
+
+- iOS: Show App Store
+- Android: Show Google Play Store button
+- Android: Show Huawei AppGallery button (for example P40 Lite) [https://github.com/minvws/nl-covid19-notification-app-website/issues/403](See GitHub Issue #403)
+- Android: Show Google Play Store and Huawei AppGallery buttons
+
+Huawei user agent string used to test (see HMSCore): 
+- Android: AppGallery: `Mozilla/5.0 (Linux; Android 10; JNY-LX1; HMSCore 5.0.3.304) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 HuaweiBrowser/11.0.2.303 Mobile Safari/537.36`
+- Android: AppGallery and Google Store: `Mozilla/5.0 (Linux; Android 10; VOG-L29; HMSCore 5.0.1.313; GMSCore 20.30.19) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 HuaweiBrowser/10.1.4.303 Mobile Safari/537.36`
+
 ## Vendors
 
 Note: rather than rely on a third party CDN or dependencies that are not part of this repository we choose to include all assets and dependencies. Please go to [the vendor licenses directory](./vendor-licenses) for the vendor licenses.

_data/translations.yml

@@ -128,6 +128,18 @@ header-googleplaystore:
   ro: Descărcați din Google play
   tr: Google Play'den indirin  
 
+header-huaweiappgallery: 
+  nl: Ontdek het op Huawei App Gallery
+  en: Get it on Huawei App Gallery
+  ar: قم بالتحميل من  Huawei App Gallery
+  bg: Изтегли в Huawei App Gallery
+  de: Über Huawei App Gallery herunterladen
+  es: Descargar de Huawei App Gallery
+  fr: Téléchargez dans la Huawei App Gallery
+  pl: Pobierz w Huawei App Gallery
+  ro: Descărcați din Huawei App Gallery
+  tr: Huawei App Gallery'den indirin  
+
 header-language-picker-label:
   nl: Taal
   en: Language
@@ -425,18 +437,10 @@ info-app-store-url:
   ro: https://apps.apple.com/gb/app/id1517652429
   tr:  https://apps.apple.com/gb/app/id1517652429
 
-info-google-play-url:
-  nl: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en
-  en: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en
-  ar: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en
-  bg: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en 
-  de: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en 
-  fr: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en 
-  es: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en
-  pl: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en
-  ro: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en
-  tr:  https://play.google.com/store/apps/details?id=nl.rijksoverheid.en
+info-google-play-url: https://play.google.com/store/apps/details?id=nl.rijksoverheid.en
 
+info-huawei-url: https://appgallery.huawei.com/#/app/C103008211
+
 info-app-store-img:
   nl: app-store-badge-nl.svg
   en: app-store-badge-en.svg
@@ -461,6 +465,18 @@ info-google-play-img:
   ro: google-play-badge-ro.svg
   tr: google-play-badge-tr.svg
 
+info-huawei-img: 
+  nl: huawei.svg
+  en: huawei-en.svg
+  ar: huawei-en.svg
+  bg: huawei-en.svg 
+  de: huawei-en.svg 
+  fr: huawei-en.svg
+  es: huawei-en.svg
+  pl: huawei-en.svg
+  ro: huawei-en.svg
+  tr: huawei-en.svg
+
 footer-samen-logo-url: https://www.rijksoverheid.nl/onderwerpen/coronavirus-covid-19/coronavirus-beeld-en-video/communicatiemiddelen-campagne
 footer-samen-logo:
   nl: Alleen samen krijgen we corona onder controle. Ga naar campagnewebsite

_includes/badges.html

@@ -14,9 +14,17 @@ <h2> {{ site.data.translations.info-lead-title[page.lang] }}:</h2>
       </a>
     </li>
     <li class="app_badge_column__right">
-      <a class="play-store" href="{{ site.data.translations.info-google-play-url[page.lang] }}">
-        <img src="{{ site.baseurl }}/img/{{site.data.translations.info-google-play-img[page.lang]}}" alt="{{ site.data.translations.header-googleplaystore[page.lang] }}" height="65" width="216" />
+      <a class="play-store" href="{{ site.data.translations.info-google-play-url }}">
+        <img src="{{ site.baseurl }}/img/{{site.data.translations.info-google-play-img[page.lang] }}" alt="{{ site.data.translations.header-googleplaystore[page.lang] }}" height="65" width="216" />
       </a>
     </li>
+    {% if include.huawei %}
+    <li class="app_badge_column__right">
+      <a class="huawei-store" href="{{ site.data.translations.info-huawei-url }}">
+        <img src="{{ site.baseurl }}/img/{{site.data.translations.info-huawei-img[page.lang]  }}" alt="{{ site.data.translations.header-huaweiappgallery[page.lang] }}" height="65" width="216" />
+      </a>
+    </li>
+    {% endif %}
+
   </ul>
 </div>

_layouts/home.html

@@ -30,12 +30,12 @@
 
     </div>
     {% include stories.html %}
-    {% include badges.html class="layout-app-badges--center-wrap" %}
+    {% include badges.html class="layout-app-badges--center-wrap" huawei="true" %}
     {% include information.html %}
     {% if page.lang == 'en' %}{% include video.html %}{% endif %}
     {% if page.lang == 'nl' %}{% include video.html %}{% endif %}
     {% include faq.html %}
-    {% include badges.html class="layout-app-badges--center-wrap layout-app-badges--background" %}
+    {% include badges.html class="layout-app-badges--center-wrap layout-app-badges--background" huawei="true" %}
   </main>
   {% include footer.html %}
 </body>

css/components/app-badges.scss

@@ -52,7 +52,17 @@
 
 .iOS {
   .play-store { display: none; }
+  .huawei-store { display: none; }
 }
 .android {
   .app-store { display: none; }
+  .play-store { display: none; }
+  .huawei-store { display: none; }
+
+  &.google-play-store {
+    .play-store { display: block; }
+  }
+  &.huawei-app-gallery {
+    .huawei-store { display: block; }
+  }
 }