@designcrowd/fe-shared-lib 1.3.0 → 1.3.2

package/dist/css/tailwind-designCom.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -651,6 +655,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -679,6 +687,9 @@ video {
 .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -706,12 +717,12 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
-.tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .tw-ml-auto {
   margin-left: auto;
 }
+.tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -820,6 +831,10 @@ video {
 .tw-h-auto {
   height: auto;
 }
+.tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .tw-h-full {
   height: 100%;
 }
@@ -1003,6 +1018,9 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1184,6 +1202,9 @@ video {
 .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1433,6 +1454,17 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1571,6 +1603,9 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
+.tw-p-5 {
+  padding: 1.25rem;
+}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1706,6 +1741,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1715,6 +1753,9 @@ video {
 .tw-text-center {
   text-align: center;
 }
+.tw-align-top {
+  vertical-align: top;
+}
 .tw-align-middle {
   vertical-align: middle;
 }
@@ -2007,6 +2048,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));
@@ -2071,6 +2116,10 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));
@@ -2213,6 +2262,10 @@ video {
     margin-left: 1rem;
   }
 
+  .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -2229,6 +2282,10 @@ video {
     display: grid;
   }
 
+  .md\:tw-hidden {
+    display: none;
+  }
+
   .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2245,6 +2302,10 @@ video {
     width: 2.5rem;
   }
 
+  .md\:tw-w-24 {
+    width: 6rem;
+  }
+
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2253,6 +2314,14 @@ video {
     width: 100%;
   }
 
+  .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+
+  .md\:tw-grow {
+    flex-grow: 1;
+  }
+
   .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2281,6 +2350,10 @@ video {
     justify-content: flex-start;
   }
 
+  .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
+
   .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2335,6 +2408,10 @@ video {
     padding-bottom: 0.5rem;
   }
 
+  .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
+
   .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/dist/css/tailwind-designCrowd.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -651,6 +655,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -679,6 +687,9 @@ video {
 .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -706,12 +717,12 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
-.tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .tw-ml-auto {
   margin-left: auto;
 }
+.tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -820,6 +831,10 @@ video {
 .tw-h-auto {
   height: auto;
 }
+.tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .tw-h-full {
   height: 100%;
 }
@@ -1003,6 +1018,9 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1184,6 +1202,9 @@ video {
 .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1433,6 +1454,17 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1571,6 +1603,9 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
+.tw-p-5 {
+  padding: 1.25rem;
+}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1706,6 +1741,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1715,6 +1753,9 @@ video {
 .tw-text-center {
   text-align: center;
 }
+.tw-align-top {
+  vertical-align: top;
+}
 .tw-align-middle {
   vertical-align: middle;
 }
@@ -2007,6 +2048,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));
@@ -2071,6 +2116,10 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
@@ -2213,6 +2262,10 @@ video {
     margin-left: 1rem;
   }
 
+  .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -2229,6 +2282,10 @@ video {
     display: grid;
   }
 
+  .md\:tw-hidden {
+    display: none;
+  }
+
   .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2245,6 +2302,10 @@ video {
     width: 2.5rem;
   }
 
+  .md\:tw-w-24 {
+    width: 6rem;
+  }
+
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2253,6 +2314,14 @@ video {
     width: 100%;
   }
 
+  .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+
+  .md\:tw-grow {
+    flex-grow: 1;
+  }
+
   .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2281,6 +2350,10 @@ video {
     justify-content: flex-start;
   }
 
+  .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
+
   .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2335,6 +2408,10 @@ video {
     padding-bottom: 0.5rem;
   }
 
+  .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
+
   .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -1603,6 +1603,9 @@ video {
 .theme-brandCrowd .tw-p-4 {
   padding: 1rem;
 }
+.theme-brandCrowd .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-brandCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1738,6 +1741,9 @@ video {
 .theme-brandCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-brandCrowd .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-brandCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-brandPage.css

@@ -1451,6 +1451,9 @@ video {
 .theme-brandPage .tw-p-4 {
   padding: 1rem;
 }
+.theme-brandPage .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-brandPage .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1586,6 +1589,9 @@ video {
 .theme-brandPage .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-brandPage .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-brandPage .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-crazyDomains.css

@@ -1603,6 +1603,9 @@ video {
 .theme-crazyDomains .tw-p-4 {
   padding: 1rem;
 }
+.theme-crazyDomains .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-crazyDomains .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1738,6 +1741,9 @@ video {
 .theme-crazyDomains .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-crazyDomains .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-crazyDomains .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-designCom.css

@@ -1603,6 +1603,9 @@ video {
 .theme-designCom .tw-p-4 {
   padding: 1rem;
 }
+.theme-designCom .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-designCom .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1738,6 +1741,9 @@ video {
 .theme-designCom .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-designCom .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-designCom .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-designCrowd.css

@@ -1603,6 +1603,9 @@ video {
 .theme-designCrowd .tw-p-4 {
   padding: 1rem;
 }
+.theme-designCrowd .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-designCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1738,6 +1741,9 @@ video {
 .theme-designCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-designCrowd .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-designCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/src/atoms/components/Modal/Modal.vue

@@ -15,7 +15,7 @@
       :class="[
         {
           'tw-w-full': !isImageMode,
-          'tw-p-4': !simple,
+          'tw-p-4': !removeHorizontalPadding && !simple,
           'tw-max-w-md': size === 'md',
           'tw-max-w-xl': size === 'xl',
           'tw-max-w-2xl': !size && !isImageMode,
@@ -91,6 +91,11 @@ export default {
       required: false,
       default: false,
     },
+    removeHorizontalPadding: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visible: {
       type: Boolean,
       required: false,

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

@@ -75,8 +75,8 @@ const props = defineProps({
     default: '',
   },
   imgUrl: {
-    type: Boolean,
-    default: true,
+    type: String,
+    default: '',
   },
   isDesignCom: {
     type: Boolean,

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

@@ -1,26 +1,32 @@
 <template>
   <div class="publish-bp--container">
     <Modal
-      classes="publish-bp--modal tw-px-2 md:tw-px-8"
+      classes="publish-bp--modal tw-pt-4"
       close-on-esc
       :visible="visible"
       :hide-scrollbar="false"
       :show-modal-background-image="showModalBackgroundImage"
       :content-classes="isBusy ? ['tw-overflow-y-hidden'] : []"
+      :remove-horizontal-padding="showUpsellRotationContainer"
+      :class="{
+        'tw-px-2 md:tw-px-8': !showUpsellRotationContainer,
+      }"
       @close-modal="onCloseModal"
     >
       <template #header>
         <div v-if="isNotPublished || isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8 tw-text-4xl">
           <span>{{ firstTimePublishHeaderLabel }}</span>
         </div>
-        <div v-if="isPublished && !isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8">
+        <div v-if="isPublished && !isSlugEditMode" class="tw-text-center tw-font-bold tw-mt-8 tw-mb-8">
           <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">{{ sitePublishedLabel }}</p>
-          <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
-            {{ publishSuccessLabel }}
-          </p>
-          <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
-            {{ publishedSuccessDescriptionLabel }}
-          </p>
+          <div v-if="!showUpsellRotationContainer">
+            <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
+              {{ publishSuccessLabel }}
+            </p>
+            <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
+              {{ publishedSuccessDescriptionLabel }}
+            </p>
+          </div>
         </div>
       </template>
       <template #default>
@@ -187,7 +193,7 @@
           </div>
         </div>
         <div v-else class="tw-font-sans">
-          <div v-if="!isCustomDomainActive && !hasPurchasedDomains" class="tw-mb-6 tw-text-left">
+          <div v-if="!showUpsellRotationContainer" class="tw-mb-6 tw-text-left">
             <div class="tw-mb-6">
               <SellDomainNameSearchWithResults
                 :is-design-com="isDesignCom"
@@ -195,17 +201,12 @@
                 :currency="userCurrency"
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
+                show-view-more-button
                 @on-change-search="onSearchTextChanged"
                 @on-buy-now-click="onBuyNowClick"
+                @on-view-more="onViewMore"
               />
             </div>
-            <Button
-              :label="viewMoreDomainLabel"
-              variant="no-border"
-              size="small-medium"
-              class="tw-text-center"
-              @on-click="onViewMore"
-            />
           </div>
           <div class="tw-px-4 tw-text-center" :class="{ 'lg:tw-px-20': hasPurchasedDomains }">
             <TextCopyField
@@ -230,6 +231,9 @@
               @on-click="onBrandPageUrlClick"
             />
           </div>
+          <div v-if="showUpsellRotationContainer" class="tw-border-t tw-border-solid tw-border-grayscale-500 tw-p-5">
+            <slot name="upsellContainer" />
+          </div>
         </div>
       </template>
     </Modal>
@@ -405,6 +409,16 @@ export default {
       required: true,
       default: '',
     },
+    showUpsellRotation: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    isSubsequentPublish: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
   },
   emits: [
     'close-modal',
@@ -503,6 +517,12 @@ export default {
         ? this.slugInputPlaceholderYourNameLabel
         : this.slugInputPlaceholderYourBusinessNameLabel;
     },
+    showUpsellRotationContainer() {
+      if (!this.isSubsequentPublish) {
+        return false;
+      }
+      return this.showUpsellRotation && !this.isCustomDomainActive && !this.hasPurchasedDomains;
+    },
   },
   watch: {
     brandPageSlug(slug) {