Merge pull request #996 from Shinsina/leaders-translations

Leaders Vue component translation support

packages/leaders-program/src/components/card/blocks/company-details.vue

@@ -24,20 +24,21 @@
         type="accent"
         @click="emitWebsiteClick"
       >
-        Visit Site
+        {{ translate("visitSiteLabel") }}
       </button-link>
       <button-link
         :href="profileHref"
         :block="true"
         @click="emitProfileClick('View Profile Button', ...arguments)"
       >
-        View Profile
+        {{ translate("viewProfileLabel") }}
       </button-link>
     </div>
   </div>
 </template>
 
 <script>
+import i18n from '../../../utils/i18n-vue';
 import ButtonLink from '../../common/button-link.vue';
 import CommonLink from '../../common/link.vue';
 
@@ -57,6 +58,10 @@ export default {
       type: String,
       default: null,
     },
+    lang: {
+      type: String,
+      default: 'en',
+    },
     logoSrc: {
       type: String,
       default: null,
@@ -76,6 +81,9 @@ export default {
     emitProfileClick(sourceLabel, data, event) {
       this.$emit('profile-click', { sourceLabel, ...data }, event);
     },
+    translate(key) {
+      return i18n(this.lang, key);
+    },
   },
 };
 </script>

packages/leaders-program/src/components/card/blocks/view-more.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import i18n from '../../../utils/i18n-vue';
 import CommonLink from '../../common/link.vue';
 
 export default {
@@ -23,6 +24,10 @@ export default {
       type: String,
       default: null,
     },
+    lang: {
+      type: String,
+      default: 'en',
+    },
     prefix: {
       type: String,
       default: 'View more',
@@ -31,7 +36,12 @@ export default {
 
   computed: {
     value() {
-      const { prefix, label } = this;
+      const { prefix, label, lang } = this;
+      if (this.lang !== 'en') {
+        const translatedPrefix = i18n(lang, prefix.toLowerCase());
+        const translatedLabel = i18n(lang, label.toLowerCase());
+        return [translatedPrefix, translatedLabel].filter((v) => v).join(' ');
+      }
       return [prefix, label].filter((v) => v).join(' ');
     },
   },

packages/leaders-program/src/components/card/index.vue

@@ -7,6 +7,7 @@
           :logo-src="logo.src"
           :profile-href="profileHref"
           :company-href="company.website"
+          :lang="lang"
           @profile-click="handleProfileClick"
           @website-click="handleWebsiteClick"
         />
@@ -32,13 +33,14 @@
     <div v-if="displayBody" class="leaders-card__body">
       <content-deck :value="promotions" :limit="4" :item-modifiers="['promo']">
         <template #header-left>
-          {{ featuredProductLabel }}
+          {{ finalizedFeaturedProductsLabel }}
         </template>
         <template #header-right>
           <view-more
             label="products"
             :href="productsHref"
             target="_blank"
+            :lang="lang"
             @click="handleAllProductsClick"
           />
         </template>
@@ -61,13 +63,14 @@
         :item-modifiers="['video']"
       >
         <template #header-left>
-          Featured Videos
+          {{ translate("featuredVideosLabel") }}
         </template>
         <template #header-right>
           <view-more
             label="videos"
             :href="youtubeHref"
             target="_blank"
+            :lang="lang"
             @click="handleAllVideosClick"
           />
         </template>
@@ -88,13 +91,14 @@
         :item-modifiers="['video']"
       >
         <template #header-left>
-          Featured Videos
+          {{ translate("featuredVideosLabel") }}
         </template>
         <template #header-right>
           <view-more
             label="videos"
             :href="profileHref"
             target="_blank"
+            :lang="lang"
             @click="handleAllVideosClick"
           />
         </template>
@@ -123,6 +127,7 @@ import VideoCard from './blocks/video-card.vue';
 import ViewMore from './blocks/view-more.vue';
 import getAsObject from '../../utils/get-as-object';
 import getEdgeNodes from '../../utils/get-edge-nodes';
+import i18n from '../../utils/i18n-vue';
 
 export default {
   components: {
@@ -152,6 +157,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    lang: {
+      type: String,
+      default: 'en',
+    },
   },
 
   computed: {
@@ -197,6 +206,12 @@ export default {
       if (this.isActive) classes.push(`${blockName}--active`);
       return classes;
     },
+    finalizedFeaturedProductsLabel() {
+      if (this.lang !== 'en') {
+        return i18n(this.lang, 'featuredProductsLabel');
+      }
+      return this.featuredProductLabel || i18n(this.lang, 'featuredProductsLabel');
+    },
   },
 
   watch: {
@@ -261,6 +276,9 @@ export default {
         date: Date.now(),
       }, event);
     },
+    translate(key) {
+      return i18n(this.lang, key);
+    },
   },
 };
 </script>

packages/leaders-program/src/components/containers/section-wrapper.vue

@@ -30,6 +30,7 @@
             :feature-youtube-videos="featureYoutubeVideos"
             :collapse-empty-categories="collapseEmptyCategories"
             :icon-style="iconStyle"
+            :lang="lang"
             @action="emitAction"
           />
         </leaders-columns>
@@ -55,6 +56,7 @@
         :promotion-limit="promotionLimit"
         :video-limit="videoLimit"
         :icon-style="iconStyle"
+        :lang="lang"
         @action="emitAction"
       />
     </leaders-columns>
@@ -127,6 +129,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    lang: {
+      type: String,
+      default: 'en',
+    },
   },
 
   computed: {

packages/leaders-program/src/components/containers/section.vue

@@ -38,6 +38,7 @@
             :is-active="isActive"
             :featured-product-label="featuredProductLabel"
             :feature-youtube-videos="featureYoutubeVideos"
+            :lang="lang"
             @action="emitAction"
           />
         </template>
@@ -128,6 +129,10 @@ export default {
       default: 'plus-minus',
       validator: (v) => ['plus-minus', 'chevron'].includes(v),
     },
+    lang: {
+      type: String,
+      default: 'en',
+    },
   },
 
   data: () => ({

packages/leaders-program/src/components/leaders.vue

@@ -39,6 +39,7 @@
         :feature-youtube-videos="featureYoutubeVideos"
         :collapse-empty-categories="collapseEmptyCategories"
         :icon-style="iconStyle"
+        :lang="lang"
         @action="emitAction"
       />
     </div>
@@ -203,6 +204,10 @@ export default {
       default: 'plus-minus',
       validator: (v) => ['plus-minus', 'chevron'].includes(v),
     },
+    lang: {
+      type: String,
+      default: 'en',
+    },
   },
 
   data: () => ({

packages/leaders-program/src/utils/translations-vue.js

@@ -0,0 +1,20 @@
+export default {
+  en: {
+    visitSiteLabel: 'Visit Site',
+    viewProfileLabel: 'View Profile',
+    featuredVideosLabel: 'Featured Videos',
+    featuredProductsLabel: 'Featured Products',
+    'view more': 'View more',
+    videos: 'videos',
+    products: 'products',
+  },
+  es: {
+    visitSiteLabel: 'Visite el sitio web',
+    viewProfileLabel: 'Vea el perfil',
+    featuredVideosLabel: 'Videos destacados',
+    featuredProductsLabel: 'Productos destacados',
+    'view more': 'Vea más',
+    videos: 'videos',
+    products: 'productos',
+  },
+};

packages/marko-web-leaders/browser/company-website-link.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import i18n from '../i18n-vue';
+import i18n from '@parameter1/base-cms-leaders-program/src/utils/i18n-vue';
 
 export default {
   props: {