@product7/product7-js 0.1.0

package/src/styles/feedback.js

@@ -0,0 +1,325 @@
+export const feedbackStyles = `
+.feedback-widget-button {
+  position: fixed;
+  z-index: var(--z-notification);
+}
+
+.feedback-widget-button.position-right {
+  bottom: var(--spacing-5);
+  right: var(--spacing-5);
+}
+
+.feedback-widget-button.position-left {
+  bottom: var(--spacing-5);
+  left: var(--spacing-5);
+}
+
+.feedback-trigger-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  height: 48px;
+  border-radius: var(--radius-full);
+  border: none;
+  padding: var(--spacing-3) var(--spacing-5);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--transition-slow);
+  color: #ffffff;
+  background: var(--color-primary);
+  box-shadow: var(--shadow-md);
+  width: fit-content;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.feedback-trigger-btn:hover:not(:disabled) {
+  box-shadow: var(--shadow-lg);
+}
+
+.feedback-trigger-btn:active:not(:disabled) {
+  transform: translateY(1px);
+  box-shadow: var(--shadow-md);
+  transition-duration: 100ms;
+}
+
+.feedback-trigger-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.feedback-trigger-btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.feedback-icon {
+  flex-shrink: 0;
+}
+
+.feedback-minimize-icon,
+.feedback-expand-icon {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 24px;
+  height: 24px;
+  padding: var(--spacing-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-white);
+  border-radius: var(--radius-full);
+  opacity: 0;
+  transition: opacity var(--transition-base);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.feedback-minimize-icon svg,
+.feedback-expand-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  fill: var(--color-primary);
+}
+
+.feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.feedback-widget-button.minimized .feedback-trigger-btn {
+  padding: var(--spacing-3);
+  width: 48px;
+  height: 48px;
+  justify-content: center;
+}
+
+.feedback-widget-button.minimized .feedback-text {
+  display: none;
+}
+
+.feedback-widget-button.minimized .feedback-minimize-icon {
+  display: none;
+}
+
+.feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.feedback-panel,
+.feedback-modal {
+  box-sizing: border-box;
+}
+
+.feedback-panel *,
+.feedback-panel *::before,
+.feedback-panel *::after,
+.feedback-modal *,
+.feedback-modal *::before,
+.feedback-modal *::after {
+  box-sizing: border-box;
+}
+
+.feedback-panel {
+  position: fixed;
+  bottom: 80px;
+  right: var(--spacing-6);
+  width: 420px;
+  max-height: 500px;
+  z-index: var(--z-popover);
+  border-radius: 12px;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateX(calc(100% + 24px));
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+  font-family: inherit;
+  box-shadow: var(--shadow-lg);
+}
+
+.feedback-panel.open {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.feedback-panel.panel-from-left {
+  right: auto;
+  left: var(--spacing-6);
+  transform: translateX(calc(-100% - 24px));
+}
+
+.feedback-panel.panel-from-left.open {
+  transform: translateX(0);
+}
+
+.feedback-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  border-radius: 12px;
+  overflow: hidden;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.96);
+  width: min(460px, calc(100vw - (var(--spacing-5) * 2)));
+  max-height: min(560px, calc(100vh - (var(--spacing-6) * 2)));
+  z-index: var(--z-popover);
+  transition: transform var(--transition-slow), opacity var(--transition-slow);
+  font-family: inherit;
+  box-shadow: var(--shadow-xl);
+}
+
+.feedback-modal.open {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+.feedback-panel-content {
+  background: var(--feedback-panel-bg, var(--color-white));
+  color: var(--feedback-panel-text, var(--color-text-primary));
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.feedback-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4) var(--spacing-6);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.feedback-panel-header h3 {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--feedback-panel-text, var(--color-text-primary));
+}
+
+.feedback-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--spacing-6);
+}
+
+.feedback-form {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.feedback-form-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  margin-top: auto;
+  padding-top: var(--spacing-6);
+}
+
+.feedback-error {
+  color: #ffffff;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  margin-top: var(--spacing-2);
+  padding: var(--spacing-3);
+  background: #D13212;
+  border-radius: var(--radius-md);
+  display: none;
+}
+
+.feedback-error.show {
+  display: block;
+}
+
+/* ========================================
+   DARK THEME — scoped variable overrides
+   ======================================== */
+
+.feedback-panel.theme-dark,
+.feedback-modal.theme-dark {
+  /* Aligned with messenger dark theme */
+  --color-white: #0f1317;
+  --color-background: #0f1317;
+  --color-surface: #1a1e24;
+  --color-border: #232930;
+  --color-neutral-50: #1a1e24;
+  --color-neutral-100: #1a1e24;
+  --color-neutral-200: #232930;
+  --color-neutral-300: #2d343c;
+  --color-neutral-400: #555555;
+  --color-neutral-500: #777777;
+  --color-neutral-900: #e8e8e8;
+  --color-text-primary: #e8e8e8;
+  --color-text-secondary: #999999;
+  --color-text-tertiary: #666666;
+  --feedback-panel-bg: #1a1e24;
+  --feedback-panel-text: #e8e8e8;
+}
+
+@media (max-width: 768px) {
+  .feedback-widget-button {
+    bottom: var(--spacing-4);
+    right: var(--spacing-4);
+  }
+
+  .feedback-widget-button.position-left {
+    left: var(--spacing-4);
+  }
+
+  .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;
+  }
+
+  .feedback-panel {
+    width: min(420px, calc(100vw - (var(--spacing-4) * 2)));
+    max-height: min(500px, calc(100vh - 88px));
+    top: auto;
+    bottom: 72px;
+    right: var(--spacing-4);
+    left: auto;
+    transform: translateX(calc(100% + 24px));
+    border-radius: var(--radius-2xl);
+  }
+
+  .feedback-panel.panel-from-left {
+    right: auto;
+    left: var(--spacing-4);
+    transform: translateX(calc(-100% - 24px));
+  }
+
+  .feedback-panel.open {
+    transform: translateX(0);
+  }
+
+  .feedback-panel-header {
+    padding: var(--spacing-4) var(--spacing-6);
+  }
+
+  .feedback-panel-body {
+    padding: var(--spacing-6);
+  }
+
+  .feedback-form-group textarea {
+    min-height: 120px;
+  }
+}
+`;