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

package/public/css/tailwind-designCom.css

@@ -744,6 +744,9 @@ video {
 .theme-designCom .tw-mt-0 {
   margin-top: 0px;
 }
+.theme-designCom .tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .theme-designCom .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -980,6 +983,9 @@ video {
 .theme-designCom .tw-flex-shrink-0 {
   flex-shrink: 0;
 }
+.theme-designCom .tw-shrink-0 {
+  flex-shrink: 0;
+}
 .theme-designCom .tw-grow {
   flex-grow: 1;
 }
@@ -1210,6 +1216,9 @@ video {
 .theme-designCom .tw-rounded-full {
   border-radius: 9999px;
 }
+.theme-designCom .tw-rounded-lg {
+  border-radius: 0.75rem;
+}
 .theme-designCom .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -2062,6 +2071,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(227 227 227 / var(--tw-border-opacity));
 }
+.theme-designCom .hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 209 209 / var(--tw-border-opacity));
+}
 .theme-designCom .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(50 71 197 / var(--tw-border-opacity));
@@ -2098,6 +2111,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(227 227 227 / var(--tw-bg-opacity));
 }
+.theme-designCom .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 209 209 / var(--tw-bg-opacity));
+}
 .theme-designCom .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2150,10 +2167,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(182 128 6 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(23 23 23 / var(--tw-text-opacity));
-}
 .theme-designCom .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(50 71 197 / var(--tw-text-opacity));

package/public/css/tailwind-designCrowd.css

@@ -744,6 +744,9 @@ video {
 .theme-designCrowd .tw-mt-0 {
   margin-top: 0px;
 }
+.theme-designCrowd .tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .theme-designCrowd .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -980,6 +983,9 @@ video {
 .theme-designCrowd .tw-flex-shrink-0 {
   flex-shrink: 0;
 }
+.theme-designCrowd .tw-shrink-0 {
+  flex-shrink: 0;
+}
 .theme-designCrowd .tw-grow {
   flex-grow: 1;
 }
@@ -1210,6 +1216,9 @@ video {
 .theme-designCrowd .tw-rounded-full {
   border-radius: 9999px;
 }
+.theme-designCrowd .tw-rounded-lg {
+  border-radius: 0.5rem;
+}
 .theme-designCrowd .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -2062,6 +2071,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
+.theme-designCrowd .hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 204 204 / var(--tw-border-opacity));
+}
 .theme-designCrowd .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(14 121 188 / var(--tw-border-opacity));
@@ -2098,6 +2111,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2150,10 +2167,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 140 34 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(39 52 56 / var(--tw-text-opacity));
-}
 .theme-designCrowd .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(14 121 188 / var(--tw-text-opacity));

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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,143 @@
+<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>

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

@@ -208,6 +208,7 @@ export const IconSample = () => {
           { name: 'printing' },
           { name: 'processing' },
           { name: 'question' },
+          { name: 'question-alt' },
           { name: 'reload' },
           { name: 'reorderable' },
           { name: 'resize' },

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

@@ -258,6 +258,7 @@ import IconPreview from './icons/preview.vue';
 import IconPrinting from './icons/printing.vue';
 import IconProcessing from './icons/processing.vue';
 import IconQuestion from './icons/question.vue';
+import IconQuestionAlt from './icons/question-alt.vue';
 import IconQuote from './icons/quote.vue';
 import IconReload from './icons/reload.vue';
 import IconReorderable from './icons/reorderable.vue';
@@ -654,6 +655,7 @@ export default {
     IconPrinting,
     IconProcessing,
     IconQuestion,
+    IconQuestionAlt,
     IconQuote,
     IconReload,
     IconReorderable,

package/src/atoms/components/Icon/icons/question-alt.vue

@@ -0,0 +1,20 @@
+<template>
+  <g clip-path="url(#clip0_7564_61184)">
+    <path
+      d="M13.9163 8.00032C13.9163 4.73274 11.2679 2.0835 8.00033 2.08333C4.73264 2.08333 2.08333 4.73264 2.08333 8.00032C2.08351 11.2679 4.73275 13.9163 8.00033 13.9163C11.2678 13.9162 13.9162 11.2677 13.9163 8.00032ZM15.4163 8.00032C15.4162 12.0962 12.0962 15.4162 8.00033 15.4163C3.90432 15.4163 0.583509 12.0963 0.583333 8.00032C0.583333 3.90421 3.90421 0.583328 8.00033 0.583328C12.0963 0.583504 15.4163 3.90432 15.4163 8.00032Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.28027 4.12499C9.55525 4.12524 10.617 5.14367 10.6172 6.38183V6.44921C10.6172 7.22797 10.1949 7.93241 9.54004 8.35351L9.53906 8.35449L8.80469 8.80957L8.79981 8.8125C8.7132 8.8604 8.65932 8.95921 8.65918 9.06152V9.0791C8.65892 9.4428 8.34663 9.71769 8 9.71777C7.63391 9.71761 7.34106 9.44078 7.34082 9.0791V9.06152C7.34096 8.52121 7.62165 8.01722 8.08789 7.72949L8.82129 7.27441C9.11072 7.08774 9.29883 6.78069 9.29883 6.44921V6.38183C9.29869 5.85081 8.83996 5.40356 8.28027 5.40332H7.7207C7.14437 5.40332 6.70228 5.84966 6.70215 6.38183C6.70215 6.74567 6.38964 7.02126 6.04297 7.02148C5.67659 7.02148 5.38379 6.74383 5.38379 6.38183C5.38393 5.14401 6.42753 4.12499 7.7207 4.12499H8.28027Z"
+    />
+    <path
+      d="M8.75 11.1C8.75 11.5142 8.41421 11.85 8 11.85C7.58579 11.85 7.25 11.5142 7.25 11.1C7.25 10.6858 7.58579 10.35 8 10.35C8.41421 10.35 8.75 10.6858 8.75 11.1Z"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_7564_61184">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
+</template>

package/src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue

@@ -6,7 +6,6 @@
       :custom-upload-data="customUploadData"
       :use-dropzone="useDropzone"
       :is-post-purchase-user-upload="isPostPurchaseUserUpload"
-      :is-ai-powered="isAiPowered"
       @on-exit="onExit"
       @on-upload-error="onUploadError"
       @on-file-change="onFileChange"
@@ -43,10 +42,6 @@ export default {
       required: false,
       default: null,
     },
-    isAiPowered: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploader.vue

@@ -1,8 +1,5 @@
 <template>
-  <LogoUploadingLoader
-    :loading-text="uploadYourLogoTr('uploadingAndConverting')"
-    :is-ai-powered="isAiPowered"
-  />
+  <LogoUploadingLoader :loading-text="uploadYourLogoTr('uploadingAndConverting')" />
 </template>
 <script>
 import brandCrowdClient from '../../clients/brand-crowd-api.client';
@@ -31,10 +28,6 @@ export default {
       type: String,
       required: true,
     },
-    isAiPowered: {
-      type: Boolean,
-      default: false,
-    },
   },
   setup() {
     return {

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadingLoader.vue

@@ -1,39 +1,22 @@
 <template>
   <div class="tw-pt-12 tw-pb-16 tw-flex tw-flex-col tw-items-center tw-justify-center">
-    <!-- AI-powered sparkle animation -->
-    <div v-if="isAiPowered" class="tw-mb-8">
-      <AiPoweredLoader alt="AI-powered loading" />
-    </div>
-
-    <!-- Traditional GIF loader -->
     <img
-      v-else
       src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
       alt="Loading"
       class="tw-block tw-mb-8"
     />
-
     <p class="tw-text-black tw-text-2xl tw-font-bold tw-text-center">
       {{ loadingText }}
     </p>
   </div>
 </template>
 <script>
-import AiPoweredLoader from '../../../atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
-
 export default {
-  components: {
-    AiPoweredLoader,
-  },
   props: {
     loadingText: {
       type: String,
       required: true,
     },
-    isAiPowered: {
-      type: Boolean,
-      default: false,
-    },
   },
 };
 </script>

package/src/experiences/components/UploadYourLogoOnBoarding/UploadYourLogoOnBoarding.vue

@@ -22,7 +22,6 @@
           :logo-file="logoFile"
           :custom-upload-data="customUploadData"
           :event-category="eventCategory"
-          :is-ai-powered="isAiPowered"
           @on-upload-success="onUploadSuccess"
           @on-upload-error="onUploadError"
         />
@@ -72,11 +71,7 @@
           @on-logo-file-change="onLogoFileChange"
         />
 
-        <LogoUploadingLoader
-          v-if="isCurrentlySaving"
-          :loading-text="uploadYourLogoTr('generatingDesigns')"
-          :is-ai-powered="isAiPowered"
-        />
+        <LogoUploadingLoader v-if="isCurrentlySaving" :loading-text="uploadYourLogoTr('generatingDesigns')" />
 
         <LogoUploadExitConfirmation
           v-if="isAttemptingToExit && currentStep > 1"
@@ -138,10 +133,6 @@ export default {
       required: false,
       default: undefined,
     },
-    isAiPowered: {
-      type: Boolean,
-      default: false,
-    },
   },
   setup() {
     return {

package/.storybook-static/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="164" version="1.1"><svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" fill="none" viewBox="0 0 164 164"><path fill="#FF4785" d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z"/><path fill="#fff" fill-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" clip-rule="evenodd"/></svg><style>@media (prefers-color-scheme:light){:root{filter:none}}</style></svg>

package/.storybook-static/index.html

@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-
-    <title>storybook - Storybook</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    
-    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
-    
-    <style>
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: italic;
-        font-weight: 400;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: normal;
-        font-weight: 700;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: italic;
-        font-weight: 700;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
-      }
-    </style>
-
-    <link href="./sb-manager/runtime.js" rel="modulepreload" />
-
-    
-    <link href="./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/a11y-1/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/links-2/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/themes-3/manager-bundle.js" rel="modulepreload" />
-       
-
-    <style>
-      #storybook-root[hidden] {
-        display: none !important;
-      }
-    </style>
-
-    
-  </head>
-  <body>
-    <div id="root"></div>
-
-    
-    <script>
-      
-        
-          window['FEATURES'] = {
-  "argTypeTargetsV7": true,
-  "legacyDecoratorFileOrder": false,
-  "disallowImplicitActionsInRenderV8": true,
-  "viewport": true,
-  "highlight": true,
-  "controls": true,
-  "interactions": true,
-  "actions": true,
-  "backgrounds": true,
-  "outline": true,
-  "measure": true
-};
-        
-      
-        
-          window['REFS'] = {};
-        
-      
-        
-          window['LOGLEVEL'] = "info";
-        
-      
-        
-          window['DOCS_OPTIONS'] = {
-  "autodocs": true
-};
-        
-      
-        
-          window['CONFIG_TYPE'] = "PRODUCTION";
-        
-      
-        
-      
-        
-      
-        
-          window['TAGS_OPTIONS'] = {
-  "dev-only": {
-    "excludeFromDocsStories": true
-  },
-  "docs-only": {
-    "excludeFromSidebar": true
-  },
-  "test-only": {
-    "excludeFromSidebar": true,
-    "excludeFromDocsStories": true
-  }
-};
-        
-      
-        
-          window['STORYBOOK_RENDERER'] = "vue3";
-        
-      
-        
-          window['STORYBOOK_BUILDER'] = "@storybook/builder-vite";
-        
-      
-        
-          window['STORYBOOK_FRAMEWORK'] = "@storybook/vue3-vite";
-        
-      
-    </script>
-    
-
-    <script type="module">
-      import './sb-manager/globals-runtime.js';
-
-      
-        import './sb-addons/storybook-core-server-presets-0/common-manager-bundle.js';
-      
-        import './sb-addons/a11y-1/manager-bundle.js';
-      
-        import './sb-addons/links-2/manager-bundle.js';
-      
-        import './sb-addons/themes-3/manager-bundle.js';
-      
-
-      import './sb-manager/runtime.js';
-    </script>
-  </body>
-</html>