@product7/feedback-sdk 1.5.9 → 1.6.0

package/package.json

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

package/src/styles/survey.js

@@ -266,6 +266,11 @@ export const surveyStyles = `
   box-shadow: inset 0 0 0 2px var(--color-primary);
 }
 
+.feedback-survey-rating-scale-compact .feedback-survey-rating-scale-btn {
+  min-height: 50px;
+  font-size: clamp(12px, 2vw, 16px);
+}
+
 .feedback-survey-labels {
   display: flex;
   justify-content: space-between;
@@ -540,6 +545,11 @@ export const surveyStyles = `
     font-size: clamp(14px, 6vw, 18px);
   }
 
+  .feedback-survey-rating-scale-compact .feedback-survey-rating-scale-btn {
+    min-height: 44px;
+    font-size: clamp(11px, 3.7vw, 14px);
+  }
+
   .feedback-survey-rating-scale + .feedback-survey-labels {
     font-size: var(--font-size-xs);
   }

package/src/widgets/SurveyWidget.js

@@ -151,13 +151,11 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		const npsScale = this._getNPSScale();
-		const npsUsesSegmentedScale = npsScale.values.length <= 7;
-		const npsContainerClass = npsUsesSegmentedScale
-			? 'feedback-survey-ces feedback-survey-rating-scale'
-			: 'feedback-survey-nps';
-		const npsButtonClass = npsUsesSegmentedScale
-			? 'feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
-			: 'feedback-survey-nps-btn';
+		const npsCompactClass =
+			npsScale.values.length > 7 ? ' feedback-survey-rating-scale-compact' : '';
+		const npsContainerClass = `feedback-survey-rating-scale${npsCompactClass}`;
+		const npsButtonClass =
+			'feedback-survey-nps-btn feedback-survey-rating-scale-btn';
 		const npsLowLabel =
 			this.surveyOptions.lowLabel ||
 			(npsScale.start === 0 ? 'Not likely' : 'Strongly Disagree');
@@ -417,13 +415,11 @@ export class SurveyWidget extends BaseWidget {
 				{ length: npsScale },
 				(_, index) => start + index
 			);
-			const usesSegmentedScale = values.length <= 7;
-			const containerClass = usesSegmentedScale
-				? 'feedback-survey-ces feedback-survey-rating-scale'
-				: 'feedback-survey-nps';
-			const buttonClass = usesSegmentedScale
-				? 'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
-				: 'feedback-survey-page-rating-btn feedback-survey-nps-btn';
+			const compactClass =
+				values.length > 7 ? ' feedback-survey-rating-scale-compact' : '';
+			const containerClass = `feedback-survey-rating-scale${compactClass}`;
+			const buttonClass =
+				'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-rating-scale-btn';
 			return `
 				<div class="${containerClass}" data-page-id="${pageId}">
 					${values
@@ -460,12 +456,12 @@ export class SurveyWidget extends BaseWidget {
 		}
 
 		return `
-			<div class="feedback-survey-ces feedback-survey-rating-scale" data-page-id="${pageId}">
+			<div class="feedback-survey-rating-scale" data-page-id="${pageId}">
 				${[...Array(scale).keys()]
 					.map((i) => {
 						const score = i + 1;
 						const selected = currentRating === score ? ' selected' : '';
-						return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
+						return `<button class="feedback-survey-page-rating-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
 					})
 					.join('')}
 			</div>