@redacto.io/consent-sdk-react 9.3.0-beta.1 → 9.4.0-beta.0

package/src/RedactoNoticeAssisted/index.ts

@@ -0,0 +1 @@
+export { RedactoNoticeAssisted as default } from "./RedactoNoticeAssisted";

package/src/RedactoNoticeAssisted/injectStyles.ts

@@ -0,0 +1,251 @@
+// CSS injection utility for the RedactoNoticeAssisted SDK.
+//
+// Mirrors RedactoNoticeConsent's injectStyles approach (large + small checkbox
+// normalization with a CSS checkmark, focus rings, spinner/fade keyframes) but
+// with an assisted-specific STYLE_ID and `redacto-assisted-*` class prefix so it
+// can coexist with NoticeConsent on the same page. Adds focus styling for the OTP
+// entry boxes.
+let stylesInjected = false;
+
+export const injectAssistedStyles = () => {
+  if (stylesInjected || typeof document === "undefined") {
+    return;
+  }
+
+  const STYLE_ID = "redacto-assisted-styles";
+
+  // Check if styles are already injected
+  if (document.getElementById(STYLE_ID)) {
+    stylesInjected = true;
+    return;
+  }
+
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    /* Redacto Notice Assisted — checkbox styles (purpose = large, element = small) */
+    .redacto-assisted-checkbox-large {
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      height: 20px !important;
+      width: 20px !important;
+      border: 2px solid #d0d5dd !important;
+      border-radius: 5px !important;
+      background-color: transparent !important;
+      cursor: pointer !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      margin: 0 !important;
+      padding: 4px !important;
+      flex-shrink: 0 !important;
+    }
+
+    .redacto-assisted-checkbox-small {
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      height: 16px !important;
+      width: 16px !important;
+      border: 2px solid #d0d5dd !important;
+      border-radius: 5px !important;
+      background-color: transparent !important;
+      cursor: pointer !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      margin: 0 !important;
+      padding: 4px !important;
+      flex-shrink: 0 !important;
+    }
+
+    .redacto-assisted-checkbox-large:checked,
+    .redacto-assisted-checkbox-small:checked {
+      background-color: #4f87ff !important;
+      border-color: #4f87ff !important;
+    }
+
+    .redacto-assisted-checkbox-large:checked::after {
+      content: '' !important;
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) rotate(45deg) !important;
+      width: 4px !important;
+      height: 8px !important;
+      border: solid white !important;
+      border-width: 0 2px 2px 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    .redacto-assisted-checkbox-small:checked::after {
+      content: '' !important;
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) rotate(45deg) !important;
+      width: 3px !important;
+      height: 6px !important;
+      border: solid white !important;
+      border-width: 0 1.5px 1.5px 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    .redacto-assisted-checkbox-large:focus-visible,
+    .redacto-assisted-checkbox-small:focus-visible {
+      outline: 2px solid #4f87ff !important;
+      outline-offset: 2px !important;
+    }
+
+    /* TTS Highlight Styles - Visible highlighting without layout shift */
+    .redacto-tts-highlight {
+      position: relative !important;
+      transition: background-color 0.3s ease, outline 0.3s ease !important;
+    }
+
+    /* Block-level elements - headings */
+    h2.redacto-tts-highlight,
+    h3.redacto-tts-highlight {
+      background-color: #FFF9C4 !important;
+      border-radius: 3px !important;
+      padding: 2px 4px !important;
+      margin: -2px -4px !important;
+    }
+
+    /* Inline elements - spans, links */
+    span.redacto-tts-highlight,
+    a.redacto-tts-highlight {
+      background-color: #FFF9C4 !important;
+      border-radius: 3px !important;
+      padding: 2px 4px !important;
+      margin: -2px -4px !important;
+    }
+
+    /* Paragraphs - handle carefully to avoid layout shift */
+    p.redacto-tts-highlight {
+      background-color: #FFF9C4 !important;
+      border-radius: 3px !important;
+      padding: 2px 4px !important;
+      margin: -2px -4px !important;
+    }
+
+    /* Buttons - use outline to keep button styles intact */
+    button.redacto-tts-highlight {
+      outline: 3px solid #FFF9C4 !important;
+      outline-offset: 2px !important;
+    }
+
+    /* OTP entry boxes */
+    .redacto-assisted-otp-input {
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+    }
+
+    .redacto-assisted-otp-input::-webkit-outer-spin-button,
+    .redacto-assisted-otp-input::-webkit-inner-spin-button {
+      -webkit-appearance: none !important;
+      margin: 0 !important;
+    }
+
+    .redacto-assisted-otp-input:focus {
+      outline: none !important;
+      border-color: var(--ra-accent, #4f87ff) !important;
+      box-shadow: 0 0 0 3px var(--ra-accent-soft, rgba(79, 135, 255, 0.18)) !important;
+    }
+
+    /* OTP entry — error state: red border + a quick shake to make it felt */
+    .redacto-assisted-otp-input.redacto-assisted-otp-error {
+      border-color: #d92d20 !important;
+      box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.14) !important;
+      animation: redactoAssistedShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    }
+
+    /* Mobile-number phone field — focus ring on the whole group */
+    .redacto-assisted-phone-field:focus-within {
+      border-color: var(--ra-accent, #4f87ff) !important;
+      box-shadow: 0 0 0 3px var(--ra-accent-soft, rgba(79, 135, 255, 0.18)) !important;
+    }
+    .redacto-assisted-phone-input:focus {
+      outline: none !important;
+    }
+
+    /* Verification-method switch link ("Use email / mobile instead") */
+    .redacto-assisted-switch-link {
+      -webkit-appearance: none !important;
+      appearance: none !important;
+    }
+    .redacto-assisted-switch-link:hover:not(:disabled) {
+      text-decoration: underline !important;
+    }
+    .redacto-assisted-switch-link:focus-visible {
+      outline: 2px solid var(--ra-accent, #4f87ff) !important;
+      outline-offset: 2px !important;
+      border-radius: 4px !important;
+    }
+    .redacto-assisted-switch-link:disabled {
+      cursor: not-allowed !important;
+      opacity: 0.6 !important;
+    }
+
+    /* Primary button hover — darken whatever the themed background is */
+    .redacto-assisted-primary-btn:hover:not(:disabled) {
+      filter: brightness(0.92) !important;
+    }
+    .redacto-assisted-primary-btn:disabled {
+      background-color: #eaecf0 !important;
+      color: #98a2b3 !important;
+      box-shadow: none !important;
+      cursor: not-allowed !important;
+    }
+    .redacto-assisted-secondary-btn:hover {
+      background-color: #f9fafb !important;
+    }
+
+    /* Animations */
+    @keyframes redactoAssistedOverlayFadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes redactoAssistedSpin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    @keyframes redactoAssistedPop {
+      0% { transform: scale(0.6); opacity: 0; }
+      60% { transform: scale(1.08); opacity: 1; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+
+    @keyframes redactoAssistedShake {
+      0%, 100% { transform: translateX(0); }
+      20% { transform: translateX(-5px); }
+      40% { transform: translateX(5px); }
+      60% { transform: translateX(-3px); }
+      80% { transform: translateX(3px); }
+    }
+
+    /* Inline verify panel reveal — a soft slide-down + fade as it mounts. */
+    @keyframes redactoAssistedReveal {
+      from { opacity: 0; transform: translateY(-8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .redacto-assisted-reveal {
+      animation: redactoAssistedReveal 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
+    }
+
+    /* Respect users who prefer reduced motion — drop the error shake + reveal. */
+    @media (prefers-reduced-motion: reduce) {
+      .redacto-assisted-otp-input.redacto-assisted-otp-error {
+        animation: none !important;
+      }
+      .redacto-assisted-reveal {
+        animation: none !important;
+      }
+    }
+  `;
+
+  document.head.appendChild(style);
+  stylesInjected = true;
+};