@product7/product7-js 0.4.2 → 0.4.3

package/src/styles/survey.js

@@ -28,7 +28,7 @@ export const surveyStyles = `
   background: var(--color-white);
   border: 1px solid var(--color-neutral-200);
   border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   padding: var(--spacing-6);
   min-width: 320px;
   max-width: 400px;
@@ -39,11 +39,10 @@ export const surveyStyles = `
 }
 
 /* ========================================
-   DARK THEME — scoped variable overrides
+   DARK THEME
    ======================================== */
 
 .feedback-survey-theme-dark {
-  /* Aligned with messenger dark theme */
   --color-white: #0f1317;
   --color-background: #0f1317;
   --color-surface: #1a1e24;
@@ -58,7 +57,6 @@ export const surveyStyles = `
   --color-text-primary: #e8e8e8;
   --color-text-secondary: #999999;
   --color-text-tertiary: #666666;
-  /* Survey-specific tokens */
   --color-primary-light: rgba(21, 94, 239, 0.18);
   --color-primary-border: rgba(21, 94, 239, 0.4);
   --color-error-light: rgba(239, 68, 68, 0.15);
@@ -88,7 +86,6 @@ export const surveyStyles = `
   transform: translate(-50%, -50%) scale(0.97);
 }
 
-
 /* ========================================
    CLOSE BUTTON
    ======================================== */
@@ -180,7 +177,7 @@ export const surveyStyles = `
 }
 
 /* ========================================
-   NPS
+   NPS — individual colored buttons
    ======================================== */
 
 .feedback-survey-nps {
@@ -193,40 +190,57 @@ export const surveyStyles = `
   flex: 1;
   height: 40px;
   min-height: unset;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
+  border-radius: 6px;
   cursor: pointer;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  transition: all var(--transition-fast);
+  color: #ffffff;
+  border: 1px solid transparent;
+  transition: filter var(--transition-fast), transform var(--transition-fast);
   font-family: inherit;
 }
 
 .feedback-survey-nps-btn:hover {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary-border);
-  color: var(--color-primary);
+  filter: brightness(1.1);
 }
 
 .feedback-survey-nps-btn.selected {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary);
-  color: var(--color-primary-active);
   transform: scale(1.06);
   z-index: 1;
   position: relative;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
 }
 
+.feedback-survey-nps-btn:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.feedback-survey-nps-btn.selected:active {
+  transform: scale(1.06) translateY(1px);
+}
+
+/* NPS score colors */
+.feedback-survey-nps-score-0  { background: #dc2626; border-color: #dc2626; }
+.feedback-survey-nps-score-1  { background: #ef4444; border-color: #ef4444; }
+.feedback-survey-nps-score-2  { background: #f97316; border-color: #f97316; }
+.feedback-survey-nps-score-3  { background: #fb923c; border-color: #fb923c; }
+.feedback-survey-nps-score-4  { background: #fdba74; border-color: #fdba74; }
+.feedback-survey-nps-score-5  { background: #fbbf24; border-color: #fbbf24; }
+.feedback-survey-nps-score-6  { background: #fde047; border-color: #fde047; color: #171717; }
+.feedback-survey-nps-score-7  { background: #e5e7eb; border-color: #e5e7eb; color: #374151; }
+.feedback-survey-nps-score-8  { background: #e5e7eb; border-color: #e5e7eb; color: #374151; }
+.feedback-survey-nps-score-9  { background: #4ade80; border-color: #4ade80; }
+.feedback-survey-nps-score-10 { background: #16a34a; border-color: #16a34a; }
+
 /* ========================================
-   CSAT
+   CSAT — emoji row
    ======================================== */
 
 .feedback-survey-csat {
   display: flex;
-  justify-content: center;
-  gap: var(--spacing-4);
+  justify-content: space-between;
+  gap: var(--spacing-3);
   padding: var(--spacing-2) 0;
 }
 
@@ -236,7 +250,7 @@ export const surveyStyles = `
   cursor: pointer;
   font-size: 32px;
   transition: transform var(--transition-fast), opacity var(--transition-fast);
-  padding: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-1);
   min-width: 44px;
   min-height: 44px;
   display: flex;
@@ -259,147 +273,24 @@ export const surveyStyles = `
   opacity: 0.3;
 }
 
-/* ========================================
-   CES SEGMENTED (short scale)
-   ======================================== */
-
-.feedback-survey-ces {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--spacing-2);
-}
-
-.feedback-survey-ces-btn {
-  flex: 1;
-  height: 40px;
-  padding: 0 var(--spacing-2);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  cursor: pointer;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  transition: all var(--transition-fast);
-  font-family: inherit;
-  text-align: center;
-}
-
-.feedback-survey-ces-btn:hover {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary-border);
-  color: var(--color-primary);
-}
-
-.feedback-survey-ces-btn.selected {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary);
-  color: var(--color-primary-active);
-}
-
-/* ========================================
-   CES LIST
-   ======================================== */
-
-.feedback-survey-ces-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-
-.feedback-survey-ces-list-btn {
-  width: 100%;
-  height: 40px;
-  padding: 0 var(--spacing-4);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  cursor: pointer;
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  transition: all var(--transition-fast);
-  font-family: inherit;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.feedback-survey-ces-list-btn:hover {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary-border);
-  color: var(--color-primary);
-}
-
-.feedback-survey-ces-list-btn.selected {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary);
-  color: var(--color-primary-active);
-}
-
-/* ========================================
-   SELECTION INDICATOR (choice & CES list)
-   ======================================== */
-
-.feedback-survey-ces-list-btn::after,
-.feedback-survey-page-choice-btn::after {
-  content: '';
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 1.5px solid var(--color-neutral-300);
-  flex-shrink: 0;
-  background: transparent;
-  background-size: 10px 10px;
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: all var(--transition-fast);
+.feedback-survey-csat-btn:active {
+  transform: scale(1.05) translateY(1px);
+  transition-duration: 100ms;
 }
 
-.feedback-survey-ces-list-btn.selected::after,
-.feedback-survey-page-choice-btn.selected::after {
-  border-color: var(--color-primary);
-  background-color: var(--color-primary);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.5 5,9.5 10,3' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+.feedback-survey-csat-btn.selected:active {
+  transform: scale(1.2) translateY(1px);
 }
 
 /* ========================================
-   RATING SCALE (generic)
+   NUMBER RATING (segmented scale)
    ======================================== */
 
-.feedback-survey-stars {
-  display: flex;
-  gap: var(--spacing-4);
-  justify-content: center;
-}
-
-.feedback-survey-star-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 2.75rem;
-  color: var(--color-neutral-300);
-  padding: 0;
-  line-height: 1;
-  transition: color var(--transition-fast), transform var(--transition-fast);
-}
-
-.feedback-survey-star-btn.filled,
-.feedback-survey-star-btn.hovered {
-  color: #f59e0b;
-}
-
-.feedback-survey-star-btn:active {
-  transform: scale(0.9);
-}
-
 .feedback-survey-rating-scale {
   display: flex;
-  gap: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: var(--radius-md);
   overflow: hidden;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 6px;
   background: var(--color-white);
 }
 
@@ -414,9 +305,9 @@ export const surveyStyles = `
   cursor: pointer;
   font-size: clamp(14px, 3vw, 18px);
   font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
+  color: #374151;
   transition: background var(--transition-fast), color var(--transition-fast);
-  position: relative;
+  font-family: inherit;
 }
 
 .feedback-survey-rating-scale-btn:last-child {
@@ -440,59 +331,59 @@ export const surveyStyles = `
   box-shadow: inset 0 0 0 2px var(--color-primary);
 }
 
-/* ========================================
-   SCALE LABELS
-   ======================================== */
-
-.feedback-survey-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--spacing-2);
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-}
-
-.feedback-survey-rating-scale + .feedback-survey-labels {
-  margin-top: var(--spacing-3);
-  padding: 0 var(--spacing-1);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-tertiary);
+.feedback-survey-rating-scale-btn:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
 }
 
 /* ========================================
-   FREQUENCY
+   STARS
    ======================================== */
 
-.feedback-survey-frequency {
+.feedback-survey-stars {
   display: flex;
   gap: var(--spacing-2);
+  justify-content: center;
 }
 
-.feedback-survey-freq-btn {
-  flex: 1;
-  height: 40px;
-  padding: 0 var(--spacing-3);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
+.feedback-survey-star-btn {
+  background: none;
+  border: none;
   cursor: pointer;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  transition: all var(--transition-fast);
-  font-family: inherit;
+  padding: 0;
+  line-height: 1;
+  color: var(--color-neutral-300);
+  transition: color var(--transition-fast), transform var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.feedback-survey-freq-btn:hover {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary-border);
-  color: var(--color-primary);
+.feedback-survey-star-btn.filled,
+.feedback-survey-star-btn.hovered {
+  color: #f59e0b;
 }
 
-.feedback-survey-freq-btn.selected {
-  background: var(--color-primary-light);
-  border-color: var(--color-primary);
-  color: var(--color-primary-active);
+.feedback-survey-star-btn:hover {
+  color: #f59e0b;
+}
+
+.feedback-survey-star-btn:active {
+  transform: scale(0.9);
+  transition-duration: 100ms;
+}
+
+/* ========================================
+   SCALE LABELS
+   ======================================== */
+
+.feedback-survey-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--spacing-2);
+  padding: 0 var(--spacing-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
 }
 
 /* ========================================
@@ -528,50 +419,6 @@ export const surveyStyles = `
   box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
-.feedback-survey-select {
-  width: 100%;
-  height: 40px;
-  padding: 0 var(--spacing-3);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-base);
-  background: var(--color-white);
-  color: var(--color-text-primary);
-  font-family: inherit;
-  cursor: pointer;
-  transition: border-color var(--transition-base);
-  outline: none;
-}
-
-.feedback-survey-select:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-light);
-}
-
-.feedback-survey-input {
-  width: 100%;
-  height: 40px;
-  padding: 0 var(--spacing-3);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-base);
-  background: var(--color-white);
-  color: var(--color-text-primary);
-  font-family: inherit;
-  box-sizing: border-box;
-  transition: border-color var(--transition-base);
-  outline: none;
-}
-
-.feedback-survey-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.feedback-survey-input:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-light);
-}
-
 /* ========================================
    MULTI-PAGE TEXT INPUT
    ======================================== */
@@ -582,7 +429,7 @@ export const surveyStyles = `
   padding: var(--spacing-3);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-family: inherit;
   background: var(--color-white);
   color: var(--color-text-primary);
@@ -615,12 +462,12 @@ export const surveyStyles = `
   width: 100%;
   height: 40px;
   padding: 0 var(--spacing-4);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-neutral-200);
   border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-text-primary);
+  background: var(--color-white);
+  color: #374151;
   text-align: left;
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   font-family: inherit;
@@ -630,33 +477,41 @@ export const surveyStyles = `
   transition: all var(--transition-fast);
 }
 
+.feedback-survey-page-choice-btn::after {
+  content: '';
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1.5px solid #D1D5DB;
+  flex-shrink: 0;
+  background: transparent;
+  transition: all var(--transition-fast);
+}
+
 .feedback-survey-page-choice-btn:hover {
+  border-color: var(--color-primary);
   background: var(--color-primary-light);
-  border-color: var(--color-primary-border);
   color: var(--color-primary);
 }
 
+.feedback-survey-page-choice-btn:hover::after {
+  border-color: var(--color-primary);
+}
+
 .feedback-survey-page-choice-btn.selected {
-  background: var(--color-primary-light);
   border-color: var(--color-primary);
+  background: var(--color-primary-light);
   color: var(--color-primary-active);
 }
 
-/* ========================================
-   LINK PAGE
-   ======================================== */
-
-.feedback-survey-link-page {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
+.feedback-survey-page-choice-btn.selected::after {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
 }
 
-.feedback-survey-link-text {
-  font-size: var(--font-size-base);
-  color: var(--color-text-secondary);
-  line-height: var(--line-height-relaxed);
-  margin: 0;
+.feedback-survey-page-choice-btn:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
 }
 
 /* ========================================
@@ -675,9 +530,9 @@ export const surveyStyles = `
   min-height: 40px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  background: var(--color-surface);
+  background: var(--color-white);
   color: var(--color-text-secondary);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   font-family: inherit;
@@ -696,8 +551,13 @@ export const surveyStyles = `
   color: var(--color-text-primary);
 }
 
+.feedback-survey-back:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
 /* ========================================
-   SUBMIT & LINK BUTTON
+   SUBMIT BUTTON
    ======================================== */
 
 .feedback-survey-submit {
@@ -712,7 +572,7 @@ export const surveyStyles = `
   color: #ffffff;
   border: 1px solid var(--color-primary);
   border-radius: var(--radius-md);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   font-family: inherit;
@@ -730,43 +590,14 @@ export const surveyStyles = `
   cursor: not-allowed;
 }
 
-.feedback-survey-link-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-2);
-  width: 100%;
-  min-height: 40px;
-  padding: 0 var(--spacing-4);
-  background: var(--color-primary);
-  color: #ffffff;
-  border: 1px solid var(--color-primary);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  font-family: inherit;
-  text-align: center;
-  text-decoration: none;
-  transition: all var(--transition-base);
-}
-
-.feedback-survey-link-btn:hover {
-  background: var(--color-primary-hover);
-  border-color: var(--color-primary-hover);
-  color: var(--color-white);
-  text-decoration: none;
-}
-
-.feedback-survey-link-btn iconify-icon,
-.feedback-survey-submit iconify-icon {
-  flex-shrink: 0;
-  color: #ffffff;
+.feedback-survey-submit:active:not(:disabled) {
+  transform: translateY(1px);
+  transition-duration: 100ms;
 }
 
+.feedback-survey-submit iconify-icon,
 .feedback-survey-back iconify-icon {
   flex-shrink: 0;
-  color: currentColor;
 }
 
 /* ========================================
@@ -791,47 +622,64 @@ export const surveyStyles = `
 }
 
 /* ========================================
-   DARK MODE — SELECTED STATE OVERRIDES
+   THANK YOU SCREEN
    ======================================== */
 
-.feedback-survey-theme-dark .feedback-survey-ces-list-btn.selected,
-.feedback-survey-theme-dark .feedback-survey-page-choice-btn.selected,
-.feedback-survey-theme-dark .feedback-survey-freq-btn.selected,
-.feedback-survey-theme-dark .feedback-survey-ces-btn.selected,
-.feedback-survey-theme-dark .feedback-survey-nps-btn.selected,
-.feedback-survey-theme-dark .feedback-survey-rating-scale-btn.selected {
-  color: var(--color-text-primary);
+.feedback-survey-thankyou {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: var(--spacing-6) 0;
 }
 
-/* ========================================
-   PRESS EFFECT
-   ======================================== */
+.feedback-survey-thankyou-icon {
+  color: #10b981;
+  margin-bottom: var(--spacing-4);
+  display: block;
+}
 
-.feedback-survey-close:active,
-.feedback-survey-submit:active,
-.feedback-survey-back:active,
-.feedback-survey-link-btn:active,
-.feedback-survey-ces-btn:active,
-.feedback-survey-ces-list-btn:active,
-.feedback-survey-page-choice-btn:active,
-.feedback-survey-freq-btn:active,
-.feedback-survey-rating-scale-btn:active,
-.feedback-survey-nps-btn:active {
-  transform: translateY(1px);
-  transition-duration: 100ms;
+.feedback-survey-thankyou-title {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  color: var(--color-text-primary);
 }
 
-.feedback-survey-nps-btn.selected:active {
-  transform: scale(1.06) translateY(1px);
+.feedback-survey-thankyou-btn {
+  margin-top: var(--spacing-5);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  height: 40px;
+  padding: 0 var(--spacing-6);
+  background: var(--color-primary);
+  color: #ffffff;
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  transition: all var(--transition-base);
 }
 
-.feedback-survey-csat-btn:active {
-  transform: scale(1.05) translateY(1px);
-  transition-duration: 100ms;
+.feedback-survey-thankyou-btn:hover {
+  background: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+  color: #ffffff;
+  text-decoration: none;
 }
 
-.feedback-survey-csat-btn.selected:active {
-  transform: scale(1.2) translateY(1px);
+/* ========================================
+   DARK MODE — SELECTED STATE OVERRIDES
+   ======================================== */
+
+.feedback-survey-theme-dark .feedback-survey-page-choice-btn.selected,
+.feedback-survey-theme-dark .feedback-survey-rating-scale-btn.selected,
+.feedback-survey-theme-dark .feedback-survey-nps-btn.selected {
+  color: var(--color-text-primary);
 }
 
 /* ========================================
@@ -864,22 +712,10 @@ export const surveyStyles = `
   flex-shrink: 0;
 }
 
-.product7-notification-success {
-  background: #037F0C;
-}
-
-.product7-notification-error {
-  background: #D13212;
-}
-
-.product7-notification-warning {
-  background: #FF9900;
-  color: #000;
-}
-
-.product7-notification-info {
-  background: #0972D3;
-}
+.product7-notification-success { background: #037F0C; }
+.product7-notification-error   { background: #D13212; }
+.product7-notification-warning { background: #FF9900; color: #000; }
+.product7-notification-info    { background: #0972D3; }
 
 /* ========================================
    RESPONSIVE
@@ -891,7 +727,7 @@ export const surveyStyles = `
     padding: var(--spacing-5);
   }
 
-.feedback-survey-nps-btn {
+  .feedback-survey-nps-btn {
     font-size: var(--font-size-xs);
   }
 
@@ -912,9 +748,5 @@ export const surveyStyles = `
   .feedback-survey-rating-scale-btn {
     font-size: clamp(13px, 5vw, 16px);
   }
-
-  .feedback-survey-rating-scale + .feedback-survey-labels {
-    font-size: var(--font-size-xs);
-  }
 }
 `;