@designcrowd/fe-shared-lib 1.2.0-ml-jj-3 → 1.2.0-ml-jj-5

package/index.js

@@ -20,6 +20,7 @@ export { default as PublishBrandPageModal } from './src/experiences/components/P
 export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
 
 export { default as useSellDomainNameSearchContent } from './src/experiences/components/SellDomainNameSearch/UseSellDomainNameSearchContent';
+export { default as useSellDomainNameListSearchResultContent } from './src/experiences/components/SellDomainNameSearchResult/UseSellDomainNameListSearchResultContent';
 
 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.0-ml-jj-3",
+  "version": "1.2.0-ml-jj-5",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

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,7 +27,7 @@
           </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"
@@ -47,7 +47,7 @@
       </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"
@@ -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/SellDomainNameListModal/SellDomainNameListModal.vue

@@ -34,7 +34,7 @@
   </Modal>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 
 import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
 import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';

package/src/experiences/components/SellDomainNameModalApplication/SellDomainNameModalApplication.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-if="!!this.$slots['header']">
+  <template v-if="!!$slots.header">
     <Modal
       classes="sell-domain-name-list-modal--modal tw-text-black"
       close-on-esc
@@ -71,7 +71,7 @@
   </template>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
 import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';

package/src/experiences/components/SellDomainNameSearch/UseSellDomainNameSearchContent.js

@@ -7,7 +7,7 @@ import {
 let globalContentProvider = null;
 
 const defaultContent = {
-  searchButtonLabel: 'Search---',
+  searchButtonLabel: 'Search',
   searchBarLabel: sellDomainNameSearchBarLabel,
   searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
   searchBarPreText: sellDomainNameSearchBarPreText,

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

@@ -41,6 +41,7 @@ import Picture from '../../../atoms/components/Picture/Picture.vue';
 
 import SellDomainNameList from '../SellDomainNameList/SellDomainNameList.vue';
 import Events from '../../constants/event-constants';
+import useSellDomainNameListSearchResultContent from './UseSellDomainNameListSearchResultContent';
 
 export default {
   components: {
@@ -99,15 +100,18 @@ export default {
       type: String,
       default: undefined,
     },
-    content: {
-      type: Object,
-      required: true,
-    },
+  },
+  setup(props) {
+    const contentProvider = useSellDomainNameListSearchResultContent(props.contentOverride);
+    const content = contentProvider.getContent();
+
+    return {
+      domainSearchEmptyMessage: content.domainSearchEmptyMessage,
+      searchAnotherDomainMessage: content.searchAnotherDomainMessage,
+    };
   },
   data() {
     return {
-      domainSearchEmptyMessage: this.content.sellDomainNameListSearchResult.domainSearchEmptyMessage,
-      searchAnotherDomainMessage: this.content.sellDomainNameListSearchResult.searchAnotherDomainMessage,
       domainNameItemsInView: undefined,
     };
   },

package/src/experiences/components/SellDomainNameSearchResult/UseSellDomainNameListSearchResultContent.js

@@ -0,0 +1,25 @@
+let globalContentProvider = null;
+
+const defaultContent = {
+  domainSearchEmptyMessage: `Sorry, we couldn't find any domain for "{domainNameSearchTerm}".`,
+  searchAnotherDomainMessage: `Try searching with another domain name.`,
+};
+
+const useSellDomainNameListSearchResultContent = (overrides = {}) => {
+  const setGlobalContentHandler = (handler) => {
+    globalContentProvider = handler;
+  };
+
+  return {
+    setGlobalContentHandler,
+    getContent: () => {
+      return {
+        ...defaultContent,
+        ...(globalContentProvider ? globalContentProvider() : {}), // provide global content through global injection
+        ...overrides, // can override specific contents on demand
+      };
+    },
+  };
+};
+
+export default useSellDomainNameListSearchResultContent;

package/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue

@@ -21,7 +21,6 @@
       :domain-name-items-per-page="domainNameItemsPerPage"
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
-      :content="content"
     />
   </div>
 </template>