@designcrowd/fe-shared-lib 1.2.5-ml-jj-2 → 1.2.5-ml-jj-3

package/index.js

@@ -19,7 +19,7 @@ export { default as SellDomainNameWidget } from './src/experiences/components/Se
 export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
 export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
 
-export { setLocaleAsync, tr } from './src/useSharedLibTranslate';
+export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
 
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.5-ml-jj-2",
+  "version": "1.2.5-ml-jj-3",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -2227,6 +2227,9 @@ video {
 .theme-brandCrowd .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-brandCrowd .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-brandCrowd .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -2263,6 +2266,9 @@ video {
 .theme-brandCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandCrowd .md\:tw-min-w-24 {
+    min-width: 6rem;
+  }
 .theme-brandCrowd .md\:tw-max-w-full {
     max-width: 100%;
   }

package/public/css/tailwind-brandPage.css

@@ -1911,6 +1911,9 @@ video {
 .theme-brandPage .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-brandPage .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-brandPage .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -1947,6 +1950,9 @@ video {
 .theme-brandPage .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandPage .md\:tw-min-w-24 {
+    min-width: 6rem;
+  }
 .theme-brandPage .md\:tw-max-w-full {
     max-width: 100%;
   }

package/public/css/tailwind-crazyDomains.css

@@ -2227,6 +2227,9 @@ video {
 .theme-crazyDomains .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-crazyDomains .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-crazyDomains .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -2263,6 +2266,9 @@ video {
 .theme-crazyDomains .md\:tw-w-full {
     width: 100%;
   }
+.theme-crazyDomains .md\:tw-min-w-24 {
+    min-width: 6rem;
+  }
 .theme-crazyDomains .md\:tw-max-w-full {
     max-width: 100%;
   }

package/public/css/tailwind-designCom.css

@@ -2227,6 +2227,9 @@ video {
 .theme-designCom .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-designCom .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-designCom .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -2263,6 +2266,9 @@ video {
 .theme-designCom .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCom .md\:tw-min-w-24 {
+    min-width: 6rem;
+  }
 .theme-designCom .md\:tw-max-w-full {
     max-width: 100%;
   }

package/public/css/tailwind-designCrowd.css

@@ -2227,6 +2227,9 @@ video {
 .theme-designCrowd .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-designCrowd .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-designCrowd .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -2263,6 +2266,9 @@ video {
 .theme-designCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCrowd .md\:tw-min-w-24 {
+    min-width: 6rem;
+  }
 .theme-designCrowd .md\:tw-max-w-full {
     max-width: 100%;
   }

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

@@ -19,9 +19,10 @@
       role="graphics-symbol"
       aria-labelledby="title"
       aria-describedby="desc"
+      :data-id="`${name}-${id}-title`"
     >
-      <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 +800,7 @@ export default {
       return css || null;
     },
     title() {
-      return this.altText || `${this.titleCase(this.name)}`;
+      return this.altText;
     },
     description() {
       return `${this.title} Icon`;

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

@@ -34,7 +34,7 @@ export const NotPublishedWithPurchasedDomains = () => {
         should-publish
         :domains="domains"
         brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
+        brand-page-base-url="https://brand.site" 
         radio-value="slug"
         :show-radio-buttons="domains.length > 0"
       />
@@ -76,7 +76,7 @@ export const PublishWithSelectedDomain = () => {
         :domains="domains"
         :custom-domain="customDomain"
         brand-page-display-name='Website'
-        brand-page-base-url="https://brand.site/"
+        brand-page-base-url="https://brand.site"
         radio-value="purchased"
         :show-radio-buttons="domains.length > 0"
         @radio-button-changed="onRadioButtonChanged"
@@ -106,7 +106,7 @@ export const SetSlug = () => {
         should-publish
         :domains="domains"
         brand-page-display-name='Website'
-        brand-page-base-url="https://brand.site/"
+        brand-page-base-url="https://brand.site"
         brand-page-slug='test-slug' 
         :show-radio-buttons="domains.length > 0"
       />
@@ -134,7 +134,7 @@ export const Published = () => {
         should-publish
         :domains="domains"
         brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
+        brand-page-base-url="https://brand.site" 
         radio-value="slug"
         brand-page-url="https://brand.site/brandname"
       />
@@ -164,7 +164,7 @@ export const PublishedNoDomains = () => {
         :domains="domains"
         brand-page-display-name='Website' 
         brand-page-slug='test-slug' 
-        brand-page-base-url="https://brand.site/" 
+        brand-page-base-url="https://brand.site" 
         radio-value="slug"
         brand-page-url="https://brand.site/test-slug"
       />
@@ -201,7 +201,7 @@ export const Free = () => {
         should-publish
         :domains="domains"
         brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
+        brand-page-base-url="https://brand.site" 
         radio-value="slug"
         brand-page-url="https://brand.site/brandname"
         :show-radio-buttons="domains.length > 0"

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

@@ -58,11 +58,11 @@
             >
               <template #slug>
                 <div class="tw-flex tw-flex-col md:tw-flex-row tw-justify-between">
-                  <div>
+                  <div class="tw-grow md:tw-mr-2">
                     <TextInput
                       v-model="internalSlug"
-                      element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md tw-w-1/3"
-                      :prefix-text="`${brandPageBaseUrl}/`"
+                      element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md"
+                      :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
                       :error="!!slugValidationError"
                       :disabled="isInputEnabled"
                       :placeholder="getPlaceHolder"
@@ -80,7 +80,7 @@
                   <Button
                     :label="publishLabel"
                     :disabled="isPublishingDisabled"
-                    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"
+                    class="tw-flex tw-items-center tw-justify-center tw-mt-2 md:tw-mt-0 tw-font-bold tw-transition-colors tw-duration-300"
                     data-test-brand-page-publish-button
                     variant="primary"
                     size="small-medium"
@@ -97,7 +97,7 @@
               <TextInput
                 v-model="internalSlug"
                 element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
-                :prefix-text="`${brandPageBaseUrl}/`"
+                :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
                 :error="!!slugValidationError"
                 :disabled="isInputEnabled"
                 :placeholder="getPlaceHolder"
@@ -450,6 +450,9 @@ export default {
     };
   },
   computed: {
+    brandPageBaseUrlWithoutHttps() {
+      return this.brandPageBaseUrl.replace('https://', '');
+    },
     firstTimePublishHeaderLabel() {
       return this.tr('publishBrandPageModal.firstTimePublishHeaderLabel', {
         brandPageDisplayName: this.brandPageDisplayName,

package/src/useSharedLibTranslate.js

@@ -11,8 +11,8 @@ const relativePathsToTranslationFiles = {
   'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
 };
 
-const setLocaleAsync = async (locale = 'en-US') => {
-  const localeToUse = locale;
+const setSharedLibLocaleAsync = async (locale = 'en-US') => {
+  const localeToUse = locale || 'en-US';
 
   if (!i18next.isInitialized) {
     await i18next.init({
@@ -35,4 +35,4 @@ const tr = (key, valuesToInterpolate = {}) => {
   return translated;
 };
 
-export { setLocaleAsync, tr };
+export { setSharedLibLocaleAsync, tr };