@designcrowd/fe-shared-lib 1.1.12-ml-jj-1 → 1.2.0-ast-disabled-1

package/.storybook/main.ts

@@ -4,9 +4,6 @@ module.exports = {
   stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-controls',
-    '@storybook/addon-essentials',
     '@storybook/addon-links',
     {
       name: '@storybook/addon-themes',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.1.12-ml-jj-1",
+  "version": "1.2.0-ast-disabled-1",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",
@@ -17,7 +17,8 @@
     "docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
   },
   "dependencies": {
-    "@nuxtjs/i18n": "^9.2.1",
+    "@nuxtjs/i18n": "9.5.4",
+    "@storybook/react": "^9.0.4",
     "autoprefixer": "10.4.17",
     "axios": "1.6.7",
     "click-outside-vue3": "4.0.1",
@@ -29,26 +30,23 @@
     "postcss-loader": "8.1.0",
     "swiper": "11.0.6",
     "tailwindcss": "3.4.1",
-    "vite": "5.1.4",
+    "vite": "6.3.5",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-vue-devtools": "7.7.0",
-    "vue": "3.5.13",
-    "vue-color": "2.8.1",
+    "vue": "3.5.15",
+    "vue-color": "3.0.2",
     "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
     "vue-router": "4.5.0",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "8.6.11",
-    "@storybook/addon-actions": "8.6.11",
-    "@storybook/addon-controls": "8.6.11",
-    "@storybook/addon-essentials": "8.6.11",
-    "@storybook/addon-links": "8.6.11",
-    "@storybook/addon-themes": "8.6.11",
-    "@storybook/vue3": "8.6.11",
-    "@storybook/vue3-vite": "8.6.11",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@storybook/addon-a11y": "9.0.4",
+    "@storybook/addon-links": "9.0.4",
+    "@storybook/addon-themes": "9.0.4",
+    "@storybook/vue3": "9.0.4",
+    "@storybook/vue3-vite": "9.0.4",
+    "@vitejs/plugin-vue": "5.2.4",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
     "@vue/eslint-config-airbnb": "8.0.0",
@@ -69,7 +67,7 @@
     "postcss-import": "16.0.0",
     "postcss-nested": "6.0.1",
     "prettier": "3.2.4",
-    "storybook": "8.6.11",
+    "storybook": "9.0.4",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",
     "tailwindcss": "3.4.1",
@@ -106,5 +104,8 @@
     "./src/*.js": {
       "import": "./src/*.js"
     }
+  },
+  "overrides": {
+    "storybook": "$storybook"
   }
 }

package/public/css/tailwind-brandCrowd.css

@@ -1020,6 +1020,9 @@ video {
 .theme-brandCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-brandCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2041,10 +2044,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 73 101 / var(--tw-bg-opacity));

package/public/css/tailwind-brandPage.css

@@ -1020,6 +1020,9 @@ video {
 .theme-brandPage .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-brandPage .tw-cursor-not-allowed {
   cursor: not-allowed;
 }

package/public/css/tailwind-crazyDomains.css

@@ -1020,6 +1020,9 @@ video {
 .theme-crazyDomains .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-crazyDomains .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2041,10 +2044,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(140 189 89 / var(--tw-bg-opacity));

package/public/css/tailwind-designCom.css

@@ -1020,6 +1020,9 @@ video {
 .theme-designCom .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-designCom .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2041,10 +2044,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));

package/public/css/tailwind-designCrowd.css

@@ -1020,6 +1020,9 @@ video {
 .theme-designCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-designCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2041,10 +2044,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));

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/experiences/components/PublishBrandPageModal/PublishBrandPageModal.stories.js

@@ -7,49 +7,6 @@ export default {
   component: PublishBrandPageModal,
 };
 
-const locale = 'en-test';
-
-const localePublishBrandPageModalContent = {
-  'en-US': {
-    firstTimePublishHeaderLabel: `Set the URL for your Website`,
-    sitePublishedLabel: `Site published!`,
-    publishSuccessLabel: `Your Website 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 Website',
-    copyLabel: 'Copy',
-    copySuccessLabel: 'Copied!',
-    publishedSuccessDescriptionLabel: 'Buy matching domain name for your brand',
-    hasAlreadyPurchasedDomainCloseButtonLabel: 'No thanks, maybe later',
-  },
-  'en-test': {
-    firstTimePublishHeaderLabel: `++Set the URL for your Website`,
-    sitePublishedLabel: `++Site published!`,
-    publishSuccessLabel: `++Your Website 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 Website',
-    copyLabel: '++Copy',
-    copySuccessLabel: '++Copied!',
-    publishedSuccessDescriptionLabel: '++Buy matching domain name for your brand',
-    hasAlreadyPurchasedDomainCloseButtonLabel: '++No thanks, maybe later',
-  },
-};
-
 export const NotPublishedWithPurchasedDomains = () => {
   return {
     components: {
@@ -58,7 +15,6 @@ export const NotPublishedWithPurchasedDomains = () => {
     data() {
       return {
         domains,
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -73,7 +29,6 @@ export const NotPublishedWithPurchasedDomains = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         :show-radio-buttons="domains.length > 0"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
       />
     `,
   };
@@ -96,7 +51,6 @@ export const PublishWithSelectedDomain = () => {
           isRegistrationComplete: false,
           status: 'Active',
         },
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {
@@ -115,7 +69,6 @@ export const PublishWithSelectedDomain = () => {
         brand-page-base-url="https://brand.site/"
         radio-value="purchased"
         :show-radio-buttons="domains.length > 0"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
         @radio-button-changed="onRadioButtonChanged"
       />
     `,
@@ -130,7 +83,6 @@ export const SetSlug = () => {
     data() {
       return {
         domains,
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -145,7 +97,6 @@ export const SetSlug = () => {
         brand-page-base-url="https://brand.site/"
         brand-page-slug='test-slug' 
         :show-radio-buttons="domains.length > 0"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
       />
     `,
   };
@@ -158,7 +109,6 @@ export const Published = () => {
     data() {
       return {
         domains,
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -172,7 +122,6 @@ export const Published = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         brand-page-url="https://brand.site/brandname"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
       />
     `,
   };
@@ -185,7 +134,6 @@ export const PublishedNoDomains = () => {
     data() {
       return {
         domains: [],
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -201,7 +149,6 @@ export const PublishedNoDomains = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         brand-page-url="https://brand.site/test-slug"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
       />
   `,
   };
@@ -217,7 +164,6 @@ export const Free = () => {
         domains: [],
         isSearchDomainListModalVisible: false,
         isDesignCom: false,
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {
@@ -239,7 +185,6 @@ export const Free = () => {
         brand-page-url="https://brand.site/brandname"
         :show-radio-buttons="domains.length > 0"
         :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
         @on-hide-domain-modal="onHideDomainListModal"
       >
         <template #recommended>

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

@@ -11,15 +11,15 @@
     >
       <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>
+          <span>Set the URL for your {{ brandPageDisplayName }}</span>
         </div>
         <div v-if="isPublished && !isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8">
-          <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">{{ sitePublishedLabel }}</p>
+          <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">Site published!</p>
           <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
-            {{ publishSuccessLabel }}
+            Your {{ brandPageDisplayName }} is live! Start using your link:
           </p>
           <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
-            {{ publishedSuccessDescriptionLabel }}
+            {{ headerSubtitle }}
           </p>
         </div>
       </template>
@@ -44,15 +44,15 @@
               for="domain-type"
               class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
             >
-              <span class="tw-inline-block tw-rounded-full">{{ freeDomainLabel }}</span>
+              <span class="tw-inline-block tw-rounded-full">Free domain</span>
             </label>
           </div>
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
             <PublishBrandPageCard
               v-if="!hasPurchasedDomains"
-              :img-url="iconUrl"
-              :title="freePublishCardTitleLabel"
-              :description="freePublishCardDescriptionLabel"
+              :imgUrl="iconUrl"
+              title="Free Address"
+              description="Choose a free address to publish now. You can always edit the URL later"
               :is-design-com="isDesignCom"
               :has-search-button="false"
             >
@@ -78,17 +78,17 @@
                     </div>
                   </div>
                   <Button
-                    :label="publishLabel"
+                    label="Publish"
                     :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"
                     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>
@@ -128,7 +128,7 @@
                   for="domain-type"
                   class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
                 >
-                  <span class="tw-inline-block tw-rounded-full">{{ purchasedDomainLabel }}</span>
+                  <span class="tw-inline-block tw-rounded-full">Purchased domain</span>
                 </label>
               </div>
               <div class="tw-mt-4 domain-dropdown">
@@ -167,7 +167,7 @@
             :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
           >
             <Button
-              :label="isSlugEditMode ? setUrlLabel : publishLabel"
+              :label="isSlugEditMode ? 'Set URL' : 'Publish'"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
               :disabled="isPublishingDisabled"
@@ -177,7 +177,7 @@
               @on-click="onPublish"
             />
             <Button
-              :label="hasAlreadyPurchasedDomainCloseButtonLabel"
+              label="No thanks, maybe later"
               variant="no-border"
               size="large"
               class="tw-my-4"
@@ -199,7 +199,7 @@
               />
             </div>
             <Button
-              :label="viewMoreDomainLabel"
+              label="VIEW MORE DOMAINS"
               variant="no-border"
               size="small-medium"
               class="tw-text-center"
@@ -210,13 +210,11 @@
             <TextCopyField
               button-variant="secondary"
               :text="brandPageUrl"
-              :default-copy-button-text="copyLabel"
-              :copied-button-text="copySuccessLabel"
               data-test-brand-page-copy-input
               @on-click="onCopyUrlClick"
             />
             <Button
-              :label="viewMyWebsiteLabel"
+              :label="`View ${brandPageDisplayName}`"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
               size="medium"
@@ -247,13 +245,13 @@
   </div>
 </template>
 <script>
-import Modal from '../../../atoms/components/Modal/Modal.vue';
+import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
 import PublishBrandPageCard from './PublishBrandPageCard.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 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 SellDomainNameSearchWithResults from '../SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
@@ -261,6 +259,8 @@ import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import Events, { sitePublishedModal } from '../../constants/event-constants';
 import mediaQueryMixin from '../../mixins/mediaQueryMixin';
 
+const headerSubtitle = 'Buy matching domain name for your brand';
+
 const DOMAIN_TYPES = {
   slug: 'slug',
   purchased: 'purchased',
@@ -399,11 +399,7 @@ export default {
     brandPageType: {
       type: String,
       required: true,
-      default: '',
-    },
-    publishBrandPageModalContent: {
-      type: Object,
-      required: true,
+      default: false,
     },
   },
   emits: [
@@ -418,30 +414,11 @@ export default {
   ],
   data() {
     return {
-      firstTimePublishHeaderLabel: this.publishBrandPageModalContent.firstTimePublishHeaderLabel,
-      sitePublishedLabel: this.publishBrandPageModalContent.sitePublishedLabel,
-      publishSuccessLabel: this.publishBrandPageModalContent.publishSuccessLabel,
-      freePublishCardTitleLabel: this.publishBrandPageModalContent.freePublishCardTitleLabel,
-      freePublishCardDescriptionLabel: this.publishBrandPageModalContent.freePublishCardDescriptionLabel,
-      slugInputPlaceholderYourNameLabel: this.publishBrandPageModalContent.slugInputPlaceholderYourNameLabel,
-      slugInputPlaceholderYourBusinessNameLabel:
-        this.publishBrandPageModalContent.slugInputPlaceholderYourBusinessNameLabel,
-      freeDomainLabel: this.publishBrandPageModalContent.freeDomainLabel,
-      purchasedDomainLabel: this.publishBrandPageModalContent.purchasedDomainLabel,
-      setUrlLabel: this.publishBrandPageModalContent.setUrlLabel,
-      publishLabel: this.publishBrandPageModalContent.publishLabel,
-      viewMoreDomainLabel: this.publishBrandPageModalContent.viewMoreDomainLabel,
-      viewMyWebsiteLabel: this.publishBrandPageModalContent.viewMyWebsiteLabel,
-      copyLabel: this.publishBrandPageModalContent.copyLabel,
-      copySuccessLabel: this.publishBrandPageModalContent.copySuccessLabel,
-      hasAlreadyPurchasedDomainCloseButtonLabel:
-        this.publishBrandPageModalContent.hasAlreadyPurchasedDomainCloseButtonLabel,
-      publishedSuccessDescriptionLabel: this.publishBrandPageModalContent.publishedSuccessDescriptionLabel,
-
       DOMAIN_TYPES,
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,
       selectedCustomDomain: this.customDomain,
+      headerSubtitle,
       userCurrency: undefined,
       isModalVisible: false,
       isLoading: false,
@@ -480,9 +457,7 @@ export default {
       return !this.allowPublish || this.isPublishing;
     },
     getPlaceHolder() {
-      return this.brandPageType === 'brandContact'
-        ? this.slugInputPlaceholderYourNameLabel
-        : this.slugInputPlaceholderYourBusinessNameLabel;
+      return this.brandPageType === 'brandContact' ? 'your-name' : 'your-business-name';
     },
   },
   watch: {

package/src/experiences/components/SellDomainNameSearchResult/SellDomainNameListSearchResult.vue

@@ -36,8 +36,8 @@
 </template>
 
 <script>
-import Loader from '../../../atoms/components/Loader/Loader.vue';
-import Picture from '../../../atoms/components/Picture/Picture.vue';
+import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+import Picture from '../../../../src/atoms/components/Picture/Picture.vue';
 
 import SellDomainNameList from '../SellDomainNameList/SellDomainNameList.vue';
 import Events from '../../constants/event-constants';