@product7/feedback-sdk 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/feedback-sdk",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/feedback-sdk.js",
 	"module": "src/index.js",

package/src/styles/styles.js

@@ -43,12 +43,12 @@ export const CSS_STYLES = `
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  height: 44px;
-  overflow: hidden;
-  border-radius: 0.5rem;
+  gap: 8px;
+  height: 48px;
+  overflow: visible;
+  border-radius: 9999px;
   border: none;
-  padding: 10px 16px;
+  padding: 12px 20px;
   font-size: 14px;
   font-weight: 500;
   font-family: inherit;
@@ -56,12 +56,13 @@ export const CSS_STYLES = `
   transition: all 0.3s ease;
   color: white;
   background: #155EEF;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: fit-content;
 }
 
 .feedback-trigger-btn:hover:not(:disabled) {
-  background: #004EEB;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
 .feedback-trigger-btn:disabled {
@@ -74,69 +75,64 @@ export const CSS_STYLES = `
   outline-offset: 2px;
 }
 
-.feedback-close-btn {
+.feedback-icon {
+  flex-shrink: 0;
+}
+
+.feedback-minimize-icon,
+.feedback-expand-icon {
   position: absolute;
-  top: -8px;
-  right: -8px;
+  top: -6px;
+  right: -6px;
   width: 24px;
   height: 24px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
   border-radius: 50%;
-  background: #EF4444;
-  border: 2px solid white;
-  color: white;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0;
-  transition: all 0.2s ease;
-  z-index: 10;
-  padding: 0;
-}
-
-.feedback-widget-button:hover .feedback-close-btn {
-  opacity: 1;
 }
 
-.feedback-close-btn:hover {
-  background: #DC2626;
-  transform: scale(1.1);
-}
-
-.feedback-close-btn:focus-visible {
-  outline: 2px solid #155EEF;
-  outline-offset: 2px;
+.feedback-minimize-icon svg,
+.feedback-expand-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  fill: #155EEF;
 }
 
-.feedback-close-btn svg {
-  width: 10px;
-  height: 10px;
+/* Show minimize icon on hover when expanded */
+.feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {
+  opacity: 1;
 }
 
-/* Minimized state */
-.feedback-widget-button.minimized {
-  transform: scale(0.4);
-  opacity: 0.3;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+/* Minimized state - just icon */
+.feedback-widget-button.minimized .feedback-trigger-btn {
+  padding: 12px;
+  width: 48px;
+  height: 48px;
+  justify-content: center;
 }
 
-.feedback-widget-button.minimized:hover {
-  opacity: 0.6;
-  transform: scale(0.5);
+.feedback-widget-button.minimized .feedback-text {
+  display: none;
 }
 
-.feedback-widget-button.minimized .feedback-trigger-btn {
-  pointer-events: none;
+.feedback-widget-button.minimized .feedback-minimize-icon {
+  display: none;
 }
 
-.feedback-widget-button.minimized .feedback-close-btn {
+/* Show expand icon on hover when minimized */
+.feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {
   opacity: 1;
-  background: #10B981;
-  pointer-events: auto;
-}
-
-.feedback-widget-button.minimized .feedback-close-btn:hover {
-  background: #059669;
 }
 
 /* Side Panel Styles */
@@ -305,7 +301,7 @@ export const CSS_STYLES = `
 
 .feedback-form-group input:focus {
   border-color: #155EEF;
-  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
 .feedback-form-group input:focus-visible {
@@ -335,7 +331,7 @@ export const CSS_STYLES = `
 
 .feedback-form-group textarea:focus {
   border-color: #155EEF;
-  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
 .feedback-form-group textarea:focus-visible {
@@ -388,11 +384,11 @@ export const CSS_STYLES = `
 }
 
 .feedback-btn-submit:hover:not(:disabled) {
-  background: #1A56DB;
+  background: #4338ca;
 }
 
 .feedback-btn-submit:active:not(:disabled) {
-  background: #1E429F;
+  background: #3730a3;
 }
 
 .feedback-btn-cancel {
@@ -599,6 +595,20 @@ export const CSS_STYLES = `
     left: 16px;
     min-width: auto;
   }
+  
+  .feedback-minimize-icon,
+  .feedback-expand-icon {
+    top: -4px;
+    right: -4px;
+    width: 20px;
+    height: 20px;
+  }
+  
+  .feedback-minimize-icon svg,
+  .feedback-expand-icon svg {
+    width: 14px;
+    height: 14px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -606,7 +616,9 @@ export const CSS_STYLES = `
   .feedback-btn,
   .feedback-panel,
   .feedback-panel-backdrop,
-  .feedback-success-notification {
+  .feedback-success-notification,
+  .feedback-minimize-icon,
+  .feedback-expand-icon {
     transition: none;
     animation: none;
   }
@@ -619,35 +631,5 @@ export const CSS_STYLES = `
   .feedback-success-notification {
     display: none !important;
   }
-
-  @media (max-width: 768px) {
-  .feedback-close-btn {
-    top: -6px;
-    right: -6px;
-    width: 20px;
-    height: 20px;
-  }
-  
-  .feedback-close-btn svg {
-    width: 8px;
-    height: 8px;
-  }
-  
-  .feedback-widget-button.minimized {
-    transform: scale(0.5);
-  }
-  
-  .feedback-widget-button.minimized:hover {
-    transform: scale(0.6);
-  }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .feedback-close-btn,
-  .feedback-widget-button.minimized {
-    transition: none;
-  }
-}
 }
-`;
+`;

package/src/widgets/ButtonWidget.js

@@ -1,5 +1,4 @@
 import { BaseWidget } from './BaseWidget.js';
-
 export class ButtonWidget extends BaseWidget {
     constructor(options) {
         super({ ...options, type: 'button' });
@@ -11,16 +10,22 @@ export class ButtonWidget extends BaseWidget {
         button.className = `feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`;
         button.innerHTML = `
       <button class="feedback-trigger-btn" type="button">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
-          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
-        </svg>
-        Feedback
-      </button>
-      <button class="feedback-close-btn" type="button" title="Hide feedback button">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-          <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
+        <svg class="feedback-icon" width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
+          <path d="M216,80H184V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V176a8,8,0,0,0,13,6.22L72,154V184a16,16,0,0,0,16,16h93.59L219,230.22a8,8,0,0,0,5,1.78,8,8,0,0,0,8-8V96A16,16,0,0,0,216,80ZM66.55,137.78,40,159.25V48H168v88H71.58A8,8,0,0,0,66.55,137.78ZM216,207.25l-26.55-21.47a8,8,0,0,0-5-1.78H88V152h80a16,16,0,0,0,16-16V96h32Z"/>
         </svg>
+        <span class="feedback-text">Feedback</span>
+        
+        <div class="feedback-minimize-icon">
+          <svg viewBox="0 0 256 256">
+            <path d="M213.66,53.66,163.31,104H192a8,8,0,0,1,0,16H144a8,8,0,0,1-8-8V64a8,8,0,0,1,16,0V92.69l50.34-50.35a8,8,0,0,1,11.32,11.32ZM112,136H64a8,8,0,0,0,0,16H92.69L42.34,202.34a8,8,0,0,0,11.32,11.32L104,163.31V192a8,8,0,0,0,16,0V144A8,8,0,0,0,112,136Z"/>
+          </svg>
+        </div>
+        
+        <div class="feedback-expand-icon">
+          <svg viewBox="0 0 256 256">
+            <path d="M112,40V64.69L61.66,14.34A8,8,0,0,0,50.34,25.66L100.69,76H72a8,8,0,0,0,0,16h48a8,8,0,0,0,8-8V36A8,8,0,0,0,112,40Zm131.06,70.61a8,8,0,0,0-8.72,1.73L184,162.69V136a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8h48a8,8,0,0,0,0-16H195.31l50.35-50.34A8,8,0,0,0,243.06,110.61Z"/>
+          </svg>
+        </div>
       </button>
     `;
 
@@ -33,55 +38,57 @@ export class ButtonWidget extends BaseWidget {
 
     _attachEvents() {
         const button = this.element.querySelector('.feedback-trigger-btn');
-        const closeBtn = this.element.querySelector('.feedback-close-btn');
+        const minimizeIcon = this.element.querySelector('.feedback-minimize-icon');
+        const expandIcon = this.element.querySelector('.feedback-expand-icon');
 
-        button.addEventListener('click', this.openPanel);
-        
-        closeBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.toggleMinimize();
+        button.addEventListener('click', (e) => {
+            const clickedMinimize = e.target.closest('.feedback-minimize-icon');
+            const clickedExpand = e.target.closest('.feedback-expand-icon');
+            
+            if (clickedMinimize) {
+                e.stopPropagation();
+                this.minimize();
+            } else if (clickedExpand) {
+                e.stopPropagation();
+                this.restore();
+            } else {
+                if (!this.isMinimized) {
+                    this.openPanel();
+                }
+            }
         });
 
         button.addEventListener('mouseenter', () => {
-            if (!this.state.isSubmitting) {
+            if (!this.state.isSubmitting && !this.isMinimized) {
                 button.style.transform = 'translateY(-2px)';
             }
         });
 
         button.addEventListener('mouseleave', () => {
-            button.style.transform = 'translateY(0)';
+            if (!this.isMinimized) {
+                button.style.transform = 'translateY(0)';
+            }
         });
     }
 
-    toggleMinimize() {
-        this.isMinimized = !this.isMinimized;
-        
-        if (this.isMinimized) {
-            this.element.classList.add('minimized');
-            localStorage.setItem('feedback-widget-minimized', 'true');
-        } else {
-            this.element.classList.remove('minimized');
-            localStorage.removeItem('feedback-widget-minimized');
-        }
+    minimize() {
+        this.isMinimized = true;
+        this.element.classList.add('minimized');
+    }
+
+    restore() {
+        this.isMinimized = false;
+        this.element.classList.remove('minimized');
     }
 
     mount(container) {
         super.mount(container);
-        
-        // Check if it was previously minimized
-        if (localStorage.getItem('feedback-widget-minimized') === 'true') {
-            this.isMinimized = true;
-            this.element.classList.add('minimized');
-        }
     }
 
     updateText(text) {
-        const button = this.element?.querySelector('.feedback-trigger-btn');
-        if (button) {
-            const textNode = button.childNodes[button.childNodes.length - 1];
-            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-                textNode.textContent = text;
-            }
+        const textEl = this.element?.querySelector('.feedback-text');
+        if (textEl) {
+            textEl.textContent = text;
         }
     }