@designcrowd/fe-shared-lib 1.2.3 → 1.2.4-ml-jj-1

package/src/atoms/components/Icon/Icon.vue

@@ -20,8 +20,8 @@
       aria-labelledby="title"
       aria-describedby="desc"
     >
-      <title v-if="title" :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
-      <desc v-if="description" :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
+      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
+      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
       <component :is="`icon-${iconName}`"></component>
     </svg>
   </div>
@@ -799,7 +799,7 @@ export default {
       return css || null;
     },
     title() {
-      return this.altText;
+      return this.altText || `${this.titleCase(this.name)}`;
     },
     description() {
       return `${this.title} Icon`;

package/src/atoms/components/Modal/Modal.stories.js

@@ -1,5 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { useArgs } from '@storybook/preview-api';
 import Modal from './Modal.vue';
 import Button from '../Button/Button.vue';
 
@@ -10,7 +8,6 @@ export default {
 
 export const Sample = {
   render: (args) => {
-    const [, setArgs] = useArgs();
     return {
       components: {
         Modal,
@@ -25,7 +22,7 @@ export const Sample = {
     `,
       methods: {
         closeLoginModal() {
-          setArgs({ ...args, visible: false });
+          this.visible = false;
         },
       },
     };
@@ -37,7 +34,6 @@ export const Sample = {
 
 export const OpenWithButton = {
   render: (args) => {
-    const [, setArgs] = useArgs();
     return {
       components: {
         Modal,
@@ -56,10 +52,10 @@ export const OpenWithButton = {
     `,
       methods: {
         closeLoginModal() {
-          setArgs({ ...args, visible: false });
+          this.visible = false;
         },
         onButtonClick() {
-          setArgs({ ...args, visible: true });
+          this.visible = true;
         },
       },
     };
@@ -71,7 +67,6 @@ export const OpenWithButton = {
 
 export const Simple = {
   render: (args) => {
-    const [, setArgs] = useArgs();
     return {
       components: {
         Modal,
@@ -90,7 +85,7 @@ export const Simple = {
     `,
       methods: {
         closeLoginModal() {
-          setArgs({ ...args, visible: false });
+          this.visible = false;
         },
       },
     };
@@ -102,7 +97,6 @@ export const Simple = {
 
 export const MandatorySample = {
   render: (args) => {
-    const [, setArgs] = useArgs();
     return {
       components: {
         Modal,
@@ -117,7 +111,7 @@ export const MandatorySample = {
     `,
       methods: {
         closeLoginModal() {
-          setArgs({ ...args, visible: false });
+          this.visible = false;
         },
       },
     };
@@ -129,7 +123,6 @@ export const MandatorySample = {
 
 export const InnerOverflowSample = {
   render: (args) => {
-    const [, setArgs] = useArgs();
     return {
       components: {
         Modal,
@@ -150,7 +143,7 @@ export const InnerOverflowSample = {
     `,
       methods: {
         closeLoginModal() {
-          setArgs({ ...args, visible: false });
+          this.visible = false;
         },
       },
     };
@@ -162,7 +155,6 @@ export const InnerOverflowSample = {
 
 export const HeaderFooterSample = {
   render: (args) => {
-    const [, setArgs] = useArgs();
     return {
       components: {
         Modal,
@@ -197,7 +189,7 @@ export const HeaderFooterSample = {
     `,
       methods: {
         closeLoginModal() {
-          setArgs({ ...args, visible: false });
+          this.visible = false;
         },
       },
     };
@@ -209,7 +201,6 @@ export const HeaderFooterSample = {
 
 export const FullscreenBreakpointSample = {
   render: (args) => {
-    const [, setArgs] = useArgs();
     return {
       components: {
         Modal,
@@ -241,7 +232,7 @@ export const FullscreenBreakpointSample = {
     `,
       methods: {
         closeLoginModal() {
-          setArgs({ ...args, visible: false });
+          this.visible = false;
         },
       },
     };
@@ -253,7 +244,6 @@ export const FullscreenBreakpointSample = {
 
 export const Image = {
   render: (args) => {
-    const [, setArgs] = useArgs();
     return {
       components: {
         Modal,
@@ -268,7 +258,7 @@ export const Image = {
     `,
       methods: {
         closeLoginModal() {
-          setArgs({ ...args, visible: false });
+          this.visible = false;
         },
       },
     };

package/src/atoms/components/Price/Price.vue

@@ -53,7 +53,7 @@ export default {
       if (this.isDomainCredit) {
         return 'Domain credit used';
       }
-      
+
       if (!this.amount || this.amount === 0) {
         return 'Free';
       }

package/src/bundles/bundled-translations.de-DE.json

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "DE-Publish Brand Page"
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Legen Sie die URL für {{brandPageDisplayName}} fest",
+    "sitePublishedLabel": "Seite veröffentlicht!",
+    "publishSuccessLabel": "Ihr {{brandPageDisplayName}} ist live! Beginnen Sie mit der Nutzung Ihres Links:",
+    "freePublishCardTitleLabel": "Freie Adresse",
+    "freePublishCardDescriptionLabel": "Wählen Sie jetzt eine kostenlose Adresse zur Veröffentlichung aus. Sie können die URL später jederzeit bearbeiten",
+    "slugInputPlaceholderYourNameLabel": "ihr-name",
+    "slugInputPlaceholderYourBusinessNameLabel": "ihr-firmen-name",
+    "freeDomainLabel": "Kostenlose Domain",
+    "purchasedDomainLabel": "Erworbene Domain",
+    "setUrlLabel": "URL festlegen",
+    "publishLabel": "Veröffentlichen",
+    "viewMoreDomainLabel": "WEITERE DOMAINS ANZEIGEN",
+    "viewMyWebsiteLabel": "{{brandPageDisplayName}} anzeigen",
+    "copyLabel": "Kopieren",
+    "copySuccessLabel": "Kopiert!",
+    "publishedSuccessDescriptionLabel": "Kaufen Sie eine passende Domain für Ihre Marke",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Nein, danke, vielleicht später",
+    "selectDomainDropdownPlaceholder": "Domain auswählen"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Kostenlose Domain",
+    "buyNowButtonLabel": "Jetzt kaufen",
+    "pricePerYearLabel": "/Jahr",
+    "costPriceLabel": "Kostenpreis:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Domainname suchen",
+    "domainSearchHeaderSubtitle": "Kaufen Sie eine passende Domain für Ihre Marke"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Domainname suchen",
+    "domainSearchHeaderSubtitle": "Kaufen Sie eine passende Domain für Ihre Marke"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Suche",
+    "searchBarLabel": "Suche",
+    "searchBarPlaceholder": "Domainnamen suchen",
+    "searchBarPreText": "Domainname"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Leider konnten wir keine Domain für \"{domainNameSearchTerm}\" finden.",
+    "searchAnotherDomainMessage": "Versuchen Sie, mit einer anderen Domain zu suchen."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Suche",
+    "searchBarLabel": "Suche",
+    "searchBarPlaceholder": "Domainnamen suchen",
+    "domainSearchOrConnectHeaderSubtitle": "Kaufen Sie passende Domains für Ihre Marke oder verknüpfen Sie Ihre bestehende Domain"
   }
 }

package/src/bundles/bundled-translations.es-ES.json

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "ES-Publish Brand Page"
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Establece la URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel": "¡Sitio publicado!",
+    "publishSuccessLabel": "¡Tu {{brandPageDisplayName}} está activo! Comienza a usar tu enlace:",
+    "freePublishCardTitleLabel": "Dirección gratuita",
+    "freePublishCardDescriptionLabel": "Elige una dirección gratuita para publicar ahora. Siempre puedes editar la URL más tarde",
+    "slugInputPlaceholderYourNameLabel": "tu-nombre",
+    "slugInputPlaceholderYourBusinessNameLabel": "nombre-de-tu-negocio",
+    "freeDomainLabel": "Dominio gratis",
+    "purchasedDomainLabel": "Dominio adquirido",
+    "setUrlLabel": "Establece URL",
+    "publishLabel": "Publicar",
+    "viewMoreDomainLabel": "VER MÁS DOMINIOS",
+    "viewMyWebsiteLabel": "Ver {{brandPageDisplayName}}",
+    "copyLabel": "Copiar",
+    "copySuccessLabel": "¡Copiado!",
+    "publishedSuccessDescriptionLabel": "Compra un nombre de dominio que coincida con tu marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "No gracias, quizás más tarde",
+    "selectDomainDropdownPlaceholder": "Selecciona un nombre de dominio"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Dominio gratis",
+    "buyNowButtonLabel": "Comprar ahora",
+    "pricePerYearLabel": "/año",
+    "costPriceLabel": "Precio de coste:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Busca un nombre de dominio",
+    "domainSearchHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Busca un nombre de dominio",
+    "domainSearchHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Buscar",
+    "searchBarLabel": "Buscar",
+    "searchBarPlaceholder": "Busca nombres de dominio",
+    "searchBarPreText": "Nombre de dominio"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Lo siento, no hemos podido encontrar ningún dominio para \"{domainNameSearchTerm}\".",
+    "searchAnotherDomainMessage": "Prueba a buscar con otro nombre de dominio."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Buscar",
+    "searchBarLabel": "Buscar",
+    "searchBarPlaceholder": "Busca nombres de dominio",
+    "domainSearchOrConnectHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca o conecta tu dominio existente"
   }
 }

package/src/bundles/bundled-translations.fr-FR.json

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "FR-Publish Brand Page"
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Définissez l'URL pour {{brandPageDisplayName}}",
+    "sitePublishedLabel": "Site publié !",
+    "publishSuccessLabel": "Votre {{brandPageDisplayName}} est en ligne ! Commencez à utiliser votre lien :",
+    "freePublishCardTitleLabel": "Adresse libre",
+    "freePublishCardDescriptionLabel": "Choisissez une adresse gratuite pour publier maintenant. Vous pouvez toujours modifier l'URL plus tard",
+    "slugInputPlaceholderYourNameLabel": "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel": "nom-de-votre-entreprise",
+    "freeDomainLabel": "Domaine gratuit",
+    "purchasedDomainLabel": "Domaine acheté",
+    "setUrlLabel": "Définir l'URL",
+    "publishLabel": "Publier",
+    "viewMoreDomainLabel": "VOIR PLUS DE NOMS DE DOMAINE",
+    "viewMyWebsiteLabel": "Voir {{brandPageDisplayName}}",
+    "copyLabel": "Copier",
+    "copySuccessLabel": "Copié !",
+    "publishedSuccessDescriptionLabel": "Achetez un nom de domaine correspondant à votre marque",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Non merci, peut-être plus tard",
+    "selectDomainDropdownPlaceholder": "Sélectionner un nom de domaine"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Domaine gratuit",
+    "buyNowButtonLabel": "Acheter",
+    "pricePerYearLabel": "/an",
+    "costPriceLabel": "Prix de revient:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Rechercher un nom de domaine",
+    "domainSearchHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Rechercher un nom de domaine",
+    "domainSearchHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Rechercher",
+    "searchBarLabel": "Rechercher",
+    "searchBarPlaceholder": "Rechercher des noms de domaine",
+    "searchBarPreText": "Nom de domaine"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Désolé, nous n’avons pas trouvé de nom de domaine pour \"{domainNameSearchTerm}\".",
+    "searchAnotherDomainMessage": "Essayez de faire une recherche avec un autre nom de domaine."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Rechercher",
+    "searchBarLabel": "Rechercher",
+    "searchBarPlaceholder": "Rechercher des noms de domaine",
+    "domainSearchOrConnectHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
   }
 }

package/src/bundles/bundled-translations.json

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "EN-Publish Brand Page"
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Set the URL for {{brandPageDisplayName}}",
+    "sitePublishedLabel": "Site published!",
+    "publishSuccessLabel": "Your {{brandPageDisplayName}} is live! Start using your link:",
+    "freePublishCardTitleLabel": "Free Address",
+    "freePublishCardDescriptionLabel": "Choose a free address to publish now. You can always edit the URL later",
+    "slugInputPlaceholderYourNameLabel": "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel": "your-business-name",
+    "freeDomainLabel": "Free domain",
+    "purchasedDomainLabel": "Purchased domain",
+    "setUrlLabel": "Set URL",
+    "publishLabel": "Publish",
+    "viewMoreDomainLabel": "VIEW MORE DOMAINS",
+    "viewMyWebsiteLabel": "View {{brandPageDisplayName}}",
+    "copyLabel": "Copy",
+    "copySuccessLabel": "Copied!",
+    "publishedSuccessDescriptionLabel": "Buy matching domain name for your brand",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later",
+    "selectDomainDropdownPlaceholder": "Select domain name"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Free Domain",
+    "buyNowButtonLabel": "Buy Now",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Cost Price:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Search a domain name",
+    "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Search a domain name",
+    "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Search",
+    "searchBarLabel": "Search",
+    "searchBarPlaceholder": "Search domain names",
+    "searchBarPreText": "Domain name"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Sorry, we couldn't find any domain for \"{domainNameSearchTerm}\".",
+    "searchAnotherDomainMessage": "Try searching with another domain name."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Search",
+    "searchBarLabel": "Search",
+    "searchBarPlaceholder": "Search domain names",
+    "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
   }
 }

package/src/bundles/bundled-translations.pt-PT.json

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "PT-Publish Brand Page"
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel": "Site publicado!",
+    "publishSuccessLabel": "A sua página {{brandPageDisplayName}} está ativa! Comece a utilizar o link:",
+    "freePublishCardTitleLabel": "Endereço gratuito",
+    "freePublishCardDescriptionLabel": "Escolha um endereço gratuito para publicar agora. Pode sempre editar o URL mais tarde",
+    "slugInputPlaceholderYourNameLabel": "o-seu-nome",
+    "slugInputPlaceholderYourBusinessNameLabel": "nome-da-sua-empresa",
+    "freeDomainLabel": "Domínio gratuito",
+    "purchasedDomainLabel": "Domínio comprado",
+    "setUrlLabel": "Definir URL",
+    "publishLabel": "Publicar",
+    "viewMoreDomainLabel": "VER MAIS DOMÍNIOS",
+    "viewMyWebsiteLabel": "Ver {{brandPageDisplayName}}",
+    "copyLabel": "Copiar",
+    "copySuccessLabel": "Copiado!",
+    "publishedSuccessDescriptionLabel": "Compre um nome de domínio que corresponda à sua marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Não, obrigado, talvez mais tarde",
+    "selectDomainDropdownPlaceholder": "Selecionar nome de domínio"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Domínio gratuito",
+    "buyNowButtonLabel": "Comprar Agora",
+    "pricePerYearLabel": "/ano",
+    "costPriceLabel": "Preço de Custo:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "searchBarPreText": "Nome de domínio"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Não conseguimos encontrar nenhum domínio para \"{domainNameSearchTerm}\".",
+    "searchAnotherDomainMessage": "Experimente pesquisar outro nome de domínio."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "domainSearchOrConnectHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
   }
 }

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue

@@ -12,10 +12,10 @@
                 {{ title }}
               </p>
               <span
-                v-if="showLabel"
+                v-if="pillLabel"
                 class="tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
               >
-                Recommended
+                {{ pillLabel }}
               </span>
             </div>
             <p class="tw-mt-2 md:tw-mt-0 tw-text-grayscale-600 tw-text-sm">
@@ -27,15 +27,15 @@
           </div>
           <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta">
             <Button
-              label="Search"
+              :label="searchButtonLabel"
               class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
               data-test-brand-page-search-button
               variant="primary"
               size="small-medium"
-              @on-click="onClick"
               :class="{
                 'tw-uppercase': !isDesignCom,
               }"
+              @on-click="onClick"
             />
           </div>
         </div>
@@ -47,23 +47,23 @@
       </div>
       <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2">
         <Button
-          label="Search"
+          :label="searchButtonLabel"
           class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
           data-test-brand-page-search-button
           variant="primary"
           size="small-medium"
           :full-width="true"
-          @on-click="onClick"
           :class="{
             'tw-uppercase': !isDesignCom,
           }"
+          @on-click="onClick"
         />
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 const props = defineProps({
   title: {
@@ -86,9 +86,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  showLabel: {
-    type: Boolean,
-    default: false,
+  searchButtonLabel: {
+    type: String,
+    default: () => 'Search',
+  },
+  pillLabel: {
+    type: String,
+    default: null,
   },
 });
 

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.stories.js

@@ -1,12 +1,19 @@
 import Card from './PublishBrandPageCard.vue';
 import PublishBrandPageModal from './PublishBrandPageModal.vue';
 import { domains } from './__fixtures__/data';
+import { setLocaleAsync } from '../../../useSharedLibTranslate';
 
 export default {
   title: 'Components/PublishBrandPageModal',
   component: PublishBrandPageModal,
 };
 
+const locale = 'en-US';
+
+const loadTranslationAsync = async () => {
+  await setLocaleAsync(locale);
+};
+
 export const NotPublishedWithPurchasedDomains = () => {
   return {
     components: {
@@ -15,6 +22,7 @@ export const NotPublishedWithPurchasedDomains = () => {
     data() {
       return {
         domains,
+        show: false,
       };
     },
     methods: {},
@@ -34,6 +42,8 @@ export const NotPublishedWithPurchasedDomains = () => {
   };
 };
 
+NotPublishedWithPurchasedDomains.loaders = [loadTranslationAsync];
+
 export const PublishWithSelectedDomain = () => {
   return {
     components: {
@@ -75,6 +85,8 @@ export const PublishWithSelectedDomain = () => {
   };
 };
 
+PublishWithSelectedDomain.loaders = [loadTranslationAsync];
+
 export const SetSlug = () => {
   return {
     components: {
@@ -101,6 +113,9 @@ export const SetSlug = () => {
     `,
   };
 };
+
+SetSlug.loaders = [loadTranslationAsync];
+
 export const Published = () => {
   return {
     components: {
@@ -126,6 +141,9 @@ export const Published = () => {
     `,
   };
 };
+
+Published.loaders = [loadTranslationAsync];
+
 export const PublishedNoDomains = () => {
   return {
     components: {
@@ -153,6 +171,9 @@ export const PublishedNoDomains = () => {
   `,
   };
 };
+
+PublishedNoDomains.loaders = [loadTranslationAsync];
+
 export const Free = () => {
   return {
     components: {
@@ -201,3 +222,5 @@ export const Free = () => {
     `,
   };
 };
+
+Free.loaders = [loadTranslationAsync];