@designcrowd/fe-shared-lib 1.2.1 → 1.2.2-ast-disabled-1

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

@@ -21,6 +21,7 @@ export const Sample = () => {
         {
           label: 'Medium',
           value: 'medium',
+          disabled: true,
         },
         {
           label: 'Large',

package/src/atoms/components/ButtonGroup/ButtonGroup.vue

@@ -10,11 +10,14 @@
       <button
         class="button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2"
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <slot name="content" :option="option"></slot>
       </button>
@@ -35,8 +38,10 @@
       <button
         v-if="variant === 'icon'"
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
           'tw-px-2': !option.iconViewBox,
           'tw-px-px':
             option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
@@ -45,9 +50,10 @@
           'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
         }"
         :style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-icon-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <div
           :class="{
@@ -67,12 +73,15 @@
       <button
         v-else
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-image-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
       </button>
@@ -90,11 +99,14 @@
       :key="`button-${option.value}`"
       :class="{
         'tw-ml-2': idx > 0 && !columns,
-        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+        'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+        'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
       }"
+      :disabled="option.disabled"
       class="tw-text-xs button-group-button tw-shadow-inner"
-      @click="$emit('on-select', option)"
+      @click="!option.disabled && $emit('on-select', option)"
     >
       {{ option.label }}
     </button>

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

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

package/src/bundleTranslation.js

@@ -0,0 +1,89 @@
+const path = require('path');
+const fs = require('fs');
+
+const localeSuffixes = ['.de-DE', '.fr-FR', '.es-ES', '.pt-PT', ''];
+
+const findTranslationFiles = (dir, localeString) => {
+  const files = [];
+  const entries = fs.readdirSync(dir);
+
+  entries.forEach((entry) => {
+    const fullPath = path.join(dir, entry);
+
+    if (fs.statSync(fullPath).isDirectory()) {
+      if (entry === 'i18n') {
+        files.push(
+          ...fs
+            .readdirSync(fullPath)
+            .filter((file) => {
+              if (localeString === '') {
+                return (
+                  !file.includes('.de-DE') &&
+                  !file.includes('.fr-FR') &&
+                  !file.includes('.es-ES') &&
+                  !file.includes('.pt-PT')
+                );
+              }
+              return file.endsWith(`${localeString}.json`);
+            })
+            .map((file) => path.join(fullPath, file)),
+        );
+      } else {
+        // Recursively find translation files in nested folders
+        files.push(...findTranslationFiles(fullPath, localeString));
+      }
+    }
+  });
+
+  return files;
+};
+
+const bundle = () => {
+  console.log('Bundling translations...', __dirname);
+
+  const bundlesDir = path.resolve(__dirname, './bundles');
+
+  console.log('bundlesDir', bundlesDir);
+
+  if (!fs.existsSync(bundlesDir)) {
+    console.log('Creating bundles dir');
+    fs.mkdirSync(bundlesDir);
+  }
+
+  const rootDir = path.resolve(__dirname, '../src');
+
+  localeSuffixes.forEach((locale) => {
+    const outputFile = path.resolve(bundlesDir, `bundled-translations${locale}.json`);
+
+    const translationFiles = findTranslationFiles(rootDir, locale);
+
+    console.log(
+      `Found ${translationFiles.length} translation files in BrandPage for file prefix: ${`bundled-translations${locale}.json`}`,
+    );
+
+    const translations = {};
+
+    translationFiles.forEach((file) => {
+      const fileContent = fs.readFileSync(file, 'utf-8');
+
+      Object.assign(translations, JSON.parse(fileContent));
+    });
+
+    console.log(`Writing bundled translations to: ${outputFile}`);
+
+    try {
+      const potentiallyExistingFile = fs.readFileSync(outputFile, 'utf-8');
+
+      if (potentiallyExistingFile === JSON.stringify(translations, null, 2)) {
+        console.log('Current translations are the same as the existing file - skipping write');
+      } else {
+        fs.writeFileSync(outputFile, JSON.stringify(translations, null, 2));
+      }
+    } catch (e) {
+      console.log("Translation file doesn't exist, creating new one");
+      fs.writeFileSync(outputFile, JSON.stringify(translations, null, 2));
+    }
+  });
+};
+
+bundle();

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

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "DE-Publish Brand Page"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "ES-Publish Brand Page"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "FR-Publish Brand Page"
+  }
+}

package/src/bundles/bundled-translations.json

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "EN-Publish Brand Page"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "PT-Publish Brand Page"
+  }
+}

package/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js

@@ -1,5 +1,5 @@
-import brandPageApiClient from '../../clients/brand-page-api.client';
 import vClickOutside from 'click-outside-vue3';
+import brandPageApiClient from '../../clients/brand-page-api.client';
 
 export const paymentConfigStatuses = Object.freeze({
   active: 'Active',

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

@@ -50,7 +50,7 @@
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
             <PublishBrandPageCard
               v-if="!hasPurchasedDomains"
-              :imgUrl="iconUrl"
+              :img-url="iconUrl"
               title="Free Address"
               description="Choose a free address to publish now. You can always edit the URL later"
               :is-design-com="isDesignCom"
@@ -84,11 +84,11 @@
                     data-test-brand-page-publish-button
                     variant="primary"
                     size="small-medium"
-                    @on-click="onPublish"
                     :full-width="isMobile"
                     :class="{
                       'tw-uppercase': !isDesignCom,
                     }"
+                    @on-click="onPublish"
                   />
                 </div>
               </template>
@@ -246,19 +246,21 @@
   </div>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import { computed } from 'vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import PublishBrandPageCard from './PublishBrandPageCard.vue';
-import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
-import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
-import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import TextCopyField from '../../../../src/atoms/components/TextCopyField/TextCopyField.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
+import Dropdown from '../../../atoms/components/Dropdown/Dropdown.vue';
+import DropdownItem from '../../../atoms/components/Dropdown/DropdownItem.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextCopyField from '../../../atoms/components/TextCopyField/TextCopyField.vue';
 
 import SellDomainNameSearchWithResults from '../SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import Events, { sitePublishedModal } from '../../constants/event-constants';
 import mediaQueryMixin from '../../mixins/mediaQueryMixin';
+import { tr } from '../../../useSharedLibTranslate';
 
 const headerSubtitle = 'Buy matching domain name for your brand';
 
@@ -413,6 +415,12 @@ export default {
     'on-view-more-domains',
     'on-slug-changed',
   ],
+  setup() {
+    return {
+      tr,
+      testMessage: computed(() => tr('publishModal.test')),
+    };
+  },
   data() {
     return {
       DOMAIN_TYPES,

package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.de-DE.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "DE-Publish Brand Page"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.es-ES.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "ES-Publish Brand Page"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.fr-FR.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "FR-Publish Brand Page"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "EN-Publish Brand Page"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.pt-PT.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "PT-Publish Brand Page"
+    }
+}

package/src/useSharedLibTranslate.js

@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import i18next from 'i18next';
+
+const fallbackLocale = 'en-US';
+
+const relativePathsToTranslationFiles = {
+  'en-US': () => import('./bundles/bundled-translations.json'),
+  'de-DE': () => import('./bundles/bundled-translations.de-DE.json'),
+  'fr-FR': () => import('./bundles/bundled-translations.fr-FR.json'),
+  'es-ES': () => import('./bundles/bundled-translations.es-ES.json'),
+  'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
+};
+
+const setLocaleAsync = async (locale = 'en-US') => {
+  const localeToUse = locale;
+
+  if (!i18next.isInitialized) {
+    await i18next.init({
+      debug: false,
+      fallbackLng: fallbackLocale,
+      lng: localeToUse,
+    });
+  }
+
+  const languageFile = (await relativePathsToTranslationFiles[localeToUse]()).default;
+
+  await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
+    ...languageFile,
+  });
+};
+
+const tr = (key, valuesToInterpolate = {}) => {
+  const translated = i18next.t(key, { ns: 'fe-shared-lib', ...valuesToInterpolate });
+
+  return translated;
+};
+
+export { setLocaleAsync, tr };