@designcrowd/fe-shared-lib 1.8.7 → 1.8.9-edge-fallback-0

package/src/atoms/components/Button/variants/ButtonDarkModePill.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-if="!url"
-    class="tw-rounded-full tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-white hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4"
+    class="tw-rounded-full tw-font-sans tw-border tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-grayscale-400 hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4"
     :class="[
       classes,
       {
@@ -10,7 +10,7 @@
         'tw-cursor-not-allowed': disabled,
         'tw-cursor-pointer': !disabled,
         'tw-text-secondary-600 tw-bg-white': active,
-        'tw-text-white tw-bg-transparent': !active || disabled,
+        'tw-text-grayscale-300 tw-bg-transparent': !active || disabled,
       },
     ]"
     :disabled="disabled"
@@ -23,7 +23,7 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-rounded-full tw-font-sans tw-inline-flex tw-border-2 tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-white hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4 tw-no-underline"
+    class="tw-rounded-full tw-font-sans tw-inline-flex tw-border tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-grayscale-400 hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4 tw-no-underline"
     :class="[
       classes,
       {
@@ -31,8 +31,8 @@
         'tw-text-sm': size !== 'small',
         'tw-cursor-not-allowed': disabled,
         'tw-cursor-pointer': !disabled,
-        'tw-text-secondary-600 tw-bg-white': active,
-        'tw-text-white tw-bg-transparent': !active || disabled,
+        'tw-text-secondary-600 tw-bg-grayscale-300': active,
+        'tw-text-grayscale-300 tw-bg-transparent': !active || disabled,
       },
     ]"
     :download="download"

package/src/experiences/components/CompactSearchForm/CompactSearchForm.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="ai-generator-hero-input tw-w-full tw-max-w-4xl tw-mx-auto tw-px-8 xl:tw-px-0">
+    <div
+      class="tw-shadow-sm tw-p-2 tw-pb-3 tw-pr-3 tw-pl-3 tw-rounded-2xl"
+      :class="[containerClasses]"
+      @keydown="onGlobalKeydown"
+    >
+      <div class="tw-flex tw-items-start tw-gap-2">
+        <!-- Convert to BYO Logo Preview component -->
+        <div v-if="byoLogoPreviewUrl" class="tw-relative tw-group tw-flex-shrink-0 tw-mt-1 tw-mb-2">
+          <img
+            :src="byoLogoPreviewUrl"
+            alt="Uploaded logo"
+            class="tw-w-20 tw-h-20 tw-rounded-lg tw-object-cover tw-block"
+            data-test-byo-logo-preview
+          />
+          <button
+            type="button"
+            class="tw-absolute tw-top-1 tw-right-1 tw-z-10 tw-w-5 tw-h-5 tw-rounded-full tw-bg-white tw-text-grayscale-800 tw-shadow tw-flex tw-items-center tw-justify-center tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-cursor-pointer"
+            data-test-byo-remove-logo
+            @click.stop="onByoRemoveLogo"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="tw-w-3 tw-h-3" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+        <textarea
+          :value="modelValue"
+          :placeholder="placeholder"
+          :maxlength="maxLength"
+          :class="textareaClasses"
+          :readonly="!isHydrated"
+          aria-label="AI Prompt"
+          data-test-business-description-input
+          @input="onInput"
+          @keydown.enter.exact.prevent="onSubmit"
+        />
+      </div>
+      <div class="tw-flex tw-flex-col tw-gap-6 sm:tw-flex-row sm:tw-items-end sm:tw-gap-2">
+        <div v-if="showByoUploadButton" class="tw-relative tw-group tw-flex-shrink-0">
+          <button
+            class="tw-flex tw-items-center tw-justify-center tw-w-10 tw-h-10 tw-rounded-full tw-bg-grayscale-700 hover:tw-bg-grayscale-800 tw-text-grayscale-400 hover:tw-border-white hover:tw-text-white tw-transition-colors"
+            data-test-byo-upload-button
+            @click.stop="onShowUploadContextMenu"
+          >
+            <Icon name="plus" />
+          </button>
+          <div
+            v-if="showUploadContextMenu"
+            class="tw-absolute tw-top-full tw-left-0 tw-mt-2 tw-z-20 tw-bg-grayscale-800 tw-text-white tw-text-sm tw-rounded tw-shadow-lg tw-whitespace-nowrap tw-py-3 tw-pl-3 tw-pr-6 tw-cursor-pointer hover:tw-bg-grayscale-700 tw-transition-colors"
+            data-test-byo-upload-context-menu
+            @click.stop="onByoUploadClick"
+          >
+            {{ byoUploadTooltip }}
+          </div>
+        </div>
+        <!-- DesignTypeDropdown -->
+        <AiPoweredMakerDropdown
+          v-if="makerOptions && makerOptions.length > 0"
+          :maker-options="makerOptions"
+          :theme="theme"
+          :default-selected="defaultSelectedMaker"
+          @maker-change="onMakerChange"
+        />
+        <!-- FilterGroups -->
+        <AiPoweredOverlays
+          v-if="enhancedFilterGroups && enhancedFilterGroups.length > 0"
+          class="tw-w-full sm:tw-w-auto"
+          :filter-groups="enhancedFilterGroups"
+          :selected-filters="selectedFilters"
+          :theme="theme"
+          @update:filters="onFilterOverlayUpdate"
+        />
+        <Button
+          v-if="ctaVariant === 'primary-round'"
+          variant="primary"
+          :icon="isLoading ? undefined : 'arrow-up'"
+          icon-size="sm"
+          classes="tw-rounded-full !tw-py-2 !tw-px-3"
+          container-classes="tw-flex tw-justify-center tw-flex-shrink-0 tw-min-h-[2.75rem] sm:tw-ml-auto"
+          :disabled="!isHydrated || disabled || isLoading"
+          :is-busy="isLoading"
+          data-test-hero-submit-button
+          @on-click="onSubmit"
+        />
+        <Button
+          v-else
+          :label="ctaLabel"
+          variant="ai"
+          container-classes="tw-w-full sm:tw-ml-auto sm:tw-flex-shrink-0 sm:tw-w-auto tw-min-h-[2.75rem]"
+          :disabled="!isHydrated || disabled || isLoading"
+          :is-busy="isLoading"
+          :full-width="true"
+          data-test-hero-submit-button
+          @on-click="onSubmit"
+        />
+      </div>
+    </div>
+
+    <div v-if="hasError" class="tw-mt-4 tw-w-full">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<any>(), {
+  placeholder: 'What would you like to design?',
+  maxLength: 1000,
+  ctaLabel: '',
+  disabled: false,
+  assetType: 'logo',
+  isUserModifiedName: false,
+  isUserModifiedKeywords: false,
+  childTranslations: () => ({}),
+  selectedFilters: () => [],
+  showOverlayFilters: false,
+  shouldSkipAiGenerationOnMount: false,
+  shouldWaitForUserInput: true,
+  showByoUploadButton: false,
+  byoUploadTooltip: 'Upload logo',
+  byoLogoPreviewUrl: undefined,
+  ctaVariant: 'ai',
+  hideStyleAndColorFilters: false,
+  useSimpleSearch: false,
+  gt9770SearchBehavior: undefined,
+});
+
+const containerClasses = computed(() => {
+  return props.theme === 'dark'
+    ? 'tw-bg-secondary-500 tw-border tw-border-grayscale-600'
+    : 'tw-bg-white tw-border tw-border-grayscale-300';
+});
+</script>

package/src/useVoiceToText.ts

@@ -104,6 +104,8 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
         return;
       }
 
+      isListening.value = false;
+
       const message = ERROR_MESSAGES[event.error] || 'An error occurred with speech recognition.';
       error.value = message;
 
@@ -118,6 +120,10 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
       }, ERROR_CLEAR_DELAY);
     };
 
+    recognition.onstart = () => {
+      isListening.value = true;
+    };
+
     recognition.onend = () => {
       isListening.value = false;
     };
@@ -142,7 +148,6 @@ export function useVoiceToText(options: UseVoiceToTextOptions = {}): UseVoiceToT
 
     try {
       recognition.start();
-      isListening.value = true;
     } catch (e: unknown) {
       // eslint-disable-next-line no-console
       console.warn('[useVoiceToText] Failed to start:', (e as Error).message);