@designcrowd/fe-shared-lib 1.5.32-ast-website-rename → 1.5.32-ast-dbc-1

package/index.js

@@ -23,7 +23,6 @@ export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteC
 
 export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
 
-export { default as BrandNameEditor } from './src/atoms/components/BrandNameEditor/BrandNameEditor.vue';
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
 export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.32-ast-website-rename",
+  "version": "1.5.32-ast-dbc-1",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/bundles/bundled-translations.json

@@ -34,7 +34,8 @@
     "websiteFriendlyName": "Website",
     "digitalBusinessCardFriendlyName": "Digital Business Card",
     "alreadyHaveADomainLabel": "Already have a domain?",
-    "useExistingDomainLabel": "Use my existing domain"
+    "useExistingDomainLabel": "Use my existing domain",
+    "createTeamCardsLabel": "Create Team Cards"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Free Domain",

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

@@ -92,11 +92,13 @@
           :has-purchased-domain="hasPurchasedDomains"
           :show-upsell-rotation-container="showUpsellRotationContainer"
           :user-currency="userCurrency"
+          :brand-page-type="brandPageType"
           @copy-url-clicked="onCopyUrlClick"
           @on-brand-page-url-click="onBrandPageUrlClick"
           @on-view-more-domains="onViewMore"
           @on-buy-now-clicked="onBuyNowClick"
           @on-search-text-changed="onSearchTextChanged"
+          @on-create-team-cards-click="onCreateTeamCardsClick"
         >
           <template #upsellContainer>
             <slot name="upsellContainer" />
@@ -289,6 +291,7 @@ export default {
     'on-slug-changed',
     'on-show-domain-modal',
     'on-use-existing-domain',
+    'on-create-team-cards-click',
   ],
   setup() {
     return {
@@ -407,6 +410,9 @@ export default {
     onBrandPageUrlClick(newVal) {
       this.$emit('on-brand-page-url-click', newVal);
     },
+    onCreateTeamCardsClick() {
+      this.$emit('on-create-team-cards-click');
+    },
     onBuyNow(newVal) {
       this.$emit('on-buy-now-clicked', newVal);
     },

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

@@ -21,6 +21,7 @@
     "websiteFriendlyName": "Website",
     "digitalBusinessCardFriendlyName": "Digital Business Card",
     "alreadyHaveADomainLabel": "Already have a domain?",
-    "useExistingDomainLabel": "Use my existing domain"
+    "useExistingDomainLabel": "Use my existing domain",
+    "createTeamCardsLabel": "Create Team Cards"
   }
 }

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

@@ -24,19 +24,29 @@
         data-test-brand-page-copy-input
         @on-click="onCopyUrlClick"
       />
-      <Button
-        :label="viewMyWebsiteLabel"
-        :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
-        icon="chevron-right-wide"
-        size="medium"
-        icon-view-box="0 0 24 24"
-        class="tw-my-4"
-        target="_blank"
-        rel="noopener noreferrer"
-        :url="brandPageUrl"
-        :full-width="isMobile"
-        @on-click="onBrandPageUrlClick"
-      />
+      <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4 tw-my-4">
+        <Button
+          v-if="brandPageType === 'brandContact'"
+          :label="createTeamCardsLabel"
+          variant="outline"
+          icon-left="group"
+          size="medium"
+          :full-width="isMobile"
+          @on-click="onCreateTeamCardsClick"
+        />
+        <Button
+          :label="viewMyWebsiteLabel"
+          :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
+          icon="chevron-right-wide"
+          size="medium"
+          icon-view-box="0 0 24 24"
+          target="_blank"
+          rel="noopener noreferrer"
+          :url="brandPageUrl"
+          :full-width="isMobile"
+          @on-click="onBrandPageUrlClick"
+        />
+      </div>
     </div>
     <div v-if="showUpsellRotationContainer" class="tw-border-t tw-border-solid tw-border-grayscale-500 tw-p-5">
       <slot name="upsellContainer" />
@@ -105,6 +115,11 @@ export default {
       required: true,
       default: undefined,
     },
+    brandPageType: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   emits: [
     'copy-url-clicked',
@@ -112,6 +127,7 @@ export default {
     'on-view-more-domains',
     'on-buy-now-clicked',
     'on-search-text-changed',
+    'on-create-team-cards-click',
   ],
   setup() {
     return {
@@ -119,6 +135,7 @@ export default {
       publishBrandPageModalTr,
       copyLabel: publishBrandPageModalTr('copyLabel'),
       copySuccessLabel: publishBrandPageModalTr('copySuccessLabel'),
+      createTeamCardsLabel: publishBrandPageModalTr('createTeamCardsLabel'),
     };
   },
   computed: {
@@ -144,6 +161,9 @@ export default {
     onBuyNowClick() {
       this.$emit('on-buy-now-clicked');
     },
+    onCreateTeamCardsClick() {
+      this.$emit('on-create-team-cards-click');
+    },
   },
 };
 </script>

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

@@ -1,75 +0,0 @@
-import BrandNameEditor from './BrandNameEditor.vue';
-
-export default {
-  title: 'Components/Brand Name Editor',
-  component: BrandNameEditor,
-};
-
-const data = {
-  components: {
-    BrandNameEditor,
-  },
-  data() {
-    return {
-      value: 'My Website',
-    };
-  },
-};
-
-export const Default = () => {
-  return {
-    ...data,
-    template: `
-      <div class="tw-bg-gray-800 tw-p-4">
-        <BrandNameEditor v-model="value" />
-      </div>
-    `,
-  };
-};
-
-export const DarkMode = () => {
-  return {
-    ...data,
-    template: `
-      <div class="tw-bg-gray-800 tw-p-4">
-        <BrandNameEditor v-model="value" :dark-mode="true" />
-      </div>
-    `,
-  };
-};
-
-export const WithPlaceholder = () => {
-  return {
-    components: {
-      BrandNameEditor,
-    },
-    data() {
-      return {
-        value: '',
-      };
-    },
-    template: `
-      <div class="tw-bg-gray-800 tw-p-4">
-        <BrandNameEditor v-model="value" :dark-mode="true" placeholder="Enter website name..." />
-      </div>
-    `,
-  };
-};
-
-export const Empty = () => {
-  return {
-    components: {
-      BrandNameEditor,
-    },
-    data() {
-      return {
-        value: '',
-      };
-    },
-    template: `
-      <div class="tw-bg-gray-800 tw-p-4">
-        <BrandNameEditor v-model="value" />
-      </div>
-    `,
-  };
-};

package/src/atoms/components/BrandNameEditor/BrandNameEditor.vue

@@ -1,143 +0,0 @@
-<template>
-  <div
-    data-component="brand-name-editor"
-    class="tw-relative tw-flex tw-gap-2 tw-flex-grow tw-items-center"
-    :class="{
-      'tw-text-white': darkMode,
-      'tw-text-black': !darkMode,
-    }"
-  >
-    <button
-      v-if="displayMode"
-      class="dynamic-width-input tw-truncate tw-border-transparent tw-bg-transparent tw-px-2 tw-font-bold"
-      @click="onEditClick"
-    >
-      {{ modelValue?.trim() || placeholder }}
-    </button>
-    <input
-      v-if="!displayMode"
-      ref="brandNameInput"
-      :value="modelValue"
-      type="text"
-      maxlength="256"
-      class="dynamic-width-input tw-px-2 tw-bg-transparent"
-      :class="{
-        'focus:tw-border-white focus:tw-shadow-md': darkMode,
-      }"
-      :placeholder="placeholder"
-      @input="onInput"
-      @blur="save"
-      @focus="focus"
-      @keyup.enter="($event.target as HTMLInputElement).blur()"
-      @keyup.esc="revert"
-    />
-    <span
-      ref="textWidthSpan"
-      class="tw-absolute tw-invisible tw-max-w-full -tw-z-50 tw-top-4 tw-left-4 tw-whitespace-nowrap tw-pointer-events-none dynamic-width-input"
-    >
-      {{ modelValue.replace(/ /g, '&nbsp;') }}
-    </span>
-    <Button
-      icon="Edit"
-      variant="no-border"
-      :white="darkMode"
-      icon-size="sm"
-      @on-click="onPencilIconClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, nextTick, onMounted } from 'vue';
-import Button from '../Button/Button.vue';
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: string;
-    darkMode?: boolean;
-    placeholder?: string;
-  }>(),
-  {
-    darkMode: false,
-    placeholder: '',
-  },
-);
-
-const emit = defineEmits<{
-  'update:model-value': [value: string];
-  save: [];
-}>();
-
-const brandNameInput = ref<HTMLInputElement | null>(null);
-const textWidthSpan = ref<HTMLSpanElement | null>(null);
-const displayMode = ref(true);
-const revertValue = ref(props.modelValue);
-const inputOffsetPx = 22;
-
-function resizeInput() {
-  nextTick(() => {
-    if (props.modelValue && brandNameInput.value && textWidthSpan.value) {
-      brandNameInput.value.style.width = `${textWidthSpan.value.offsetWidth + inputOffsetPx}px`;
-    } else if (brandNameInput.value) {
-      brandNameInput.value.style.width = 'auto';
-    }
-  });
-}
-
-watch(() => displayMode.value, resizeInput);
-watch(() => props.modelValue, resizeInput);
-
-onMounted(() => {
-  nextTick(() => {
-    revertValue.value = props.modelValue;
-    resizeInput();
-  });
-});
-
-function focus() {
-  displayMode.value = false;
-}
-
-function save() {
-  displayMode.value = true;
-  if (
-    props.modelValue.trim() === '' ||
-    props.modelValue !== revertValue.value
-  ) {
-    emit('save');
-    revertValue.value = props.modelValue;
-  }
-}
-
-function revert() {
-  emit('update:model-value', revertValue.value);
-  brandNameInput.value?.blur();
-}
-
-function onInput(event: Event) {
-  emit('update:model-value', (event.target as HTMLInputElement).value);
-}
-
-function onEditClick() {
-  displayMode.value = !displayMode.value;
-  if (!displayMode.value) {
-    nextTick(() => {
-      brandNameInput.value?.focus();
-    });
-  }
-}
-
-function onPencilIconClick() {
-  onEditClick();
-}
-</script>
-<style scoped>
-.dynamic-width-input {
-  @apply tw-border tw-outline-none tw-truncate tw-rounded tw-w-auto tw-py-0.5 tw-my-auto tw-text-base tw-text-white tw-max-w-xs;
-}
-
-input.dynamic-width-input:focus {
-  -webkit-box-shadow: 0 0 5px #d1d1d1;
-  box-shadow: 0 0 5px #d1d1d1;
-}
-</style>