@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.11

package/v2Components/HtmlEditor/__tests__/index.lazy.test.js

@@ -9,23 +9,19 @@ import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 // Mock CapSpin before importing the component
-jest.mock('@capillarytech/cap-ui-library/CapSpin', () => function MockCapSpin({ size }) {
-  return <div data-testid="cap-spin" data-size={size}>Loading...</div>;
+jest.mock('@capillarytech/cap-ui-library/CapSpin', () => {
+  return function MockCapSpin({ size }) {
+    return <div data-testid="cap-spin" data-size={size}>Loading...</div>;
+  };
 });
 
 // Mock the HTMLEditor component
 jest.mock('../HTMLEditor', () => {
-  const MockHTMLEditor = function MockHTMLEditor(props) {
-    return (
-      <div data-testid="html-editor">
-Mock HTML Editor -
-        {props.variant}
-      </div>
-    );
-  };
   return {
     __esModule: true,
-    default: MockHTMLEditor,
+    default: function MockHTMLEditor(props) {
+      return <div data-testid="html-editor">Mock HTML Editor - {props.variant}</div>;
+    }
   };
 });
 
@@ -117,8 +113,7 @@ describe('index.lazy.js', () => {
         expect(screen.getByTestId('html-editor')).toBeInTheDocument();
       });
 
-      const editor = screen.getByTestId('html-editor');
-      expect(editor.textContent).toBe('Mock HTML Editor -email');
+      expect(screen.getByText(/Mock HTML Editor - email/)).toBeInTheDocument();
     });
 
     it('shows fallback while loading', async () => {
@@ -139,7 +134,7 @@ describe('index.lazy.js', () => {
         <HTMLEditorLazy
           variant="inapp"
           onSave={mockOnSave}
-          readOnly
+          readOnly={true}
           className="custom-class"
         />
       );
@@ -148,8 +143,7 @@ describe('index.lazy.js', () => {
         expect(screen.getByTestId('html-editor')).toBeInTheDocument();
       });
 
-      const editor = screen.getByTestId('html-editor');
-      expect(editor.textContent).toBe('Mock HTML Editor -inapp');
+      expect(screen.getByText(/Mock HTML Editor - inapp/)).toBeInTheDocument();
     });
 
     it('has correct display name', async () => {
@@ -221,7 +215,7 @@ describe('index.lazy.js', () => {
       render(
         <HTMLEditorLazy
           className="custom-editor"
-          readOnly
+          readOnly={true}
           showFullscreenButton={false}
           autoSave={false}
           autoSaveInterval={60000}
@@ -535,3 +529,4 @@ describe('index.lazy.js', () => {
     });
   });
 });
+

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -28,7 +28,6 @@
       padding: 0;
       min-height: 3.25rem;
       height: 3.25rem;
-      position: relative;
 
       // Right-align toolbar actions
       &__right {
@@ -84,6 +83,19 @@
     flex-direction: column;
   }
 
+  // Validation Error Display - Full Width Below Split Container
+  &-validation {
+    margin-top: 1rem; // 16px = 1rem
+
+    // Ensure ErrorInfoNote fits well in the editor layout
+    .error-container {
+      width: 100%; // Full width instead of max-content
+      margin-top: 0;
+      margin-bottom: 0;
+      border-radius: 0.25rem;
+    }
+  }
+
   // Split container - integrated design
   &-split-container {
     flex: 1;
@@ -116,7 +128,6 @@
         padding: 0;
         min-height: 3.25rem; // 52px = 3.25rem
         height: 3.25rem;
-        position: relative;
 
         // Right-align toolbar actions
         &__right {
@@ -208,24 +219,24 @@
     .code-editor-pane {
       .codemirror-wrapper {
         height: 100%;
-        max-height: calc(95vh - 5%); // 95% of viewport height with 5% gap
+        max-height: 70vh; // Larger height in fullscreen
       }
 
       &__content {
-        max-height: calc(95vh - 5%); // 95% of viewport height with 5% gap
+        max-height: 70vh; // Larger height in fullscreen
       }
     }
 
     .preview-pane {
-      max-height: calc(95vh - 5%); // Same as editor pane - 95% of viewport height with 5% gap
+      max-height: 70vh; // Larger height in fullscreen
 
       &__content {
-        max-height: calc(95vh - 5%); // Same as editor pane
+        max-height: 65vh; // Account for modal header
       }
 
       iframe {
-        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 5%);
+        height: 60vh; // Larger iframe in fullscreen
+        max-height: 60vh;
       }
     }
   }
@@ -256,6 +267,10 @@
 
 // Focus states and accessibility
 .html-editor {
+  &:focus-within {
+    outline: 0.125rem solid map-get($CAP_PRIMARY, base); // 2px = 0.125rem
+    outline-offset: -0.125rem; // -2px = -0.125rem
+  }
 
   // High contrast mode support
   @media (prefers-contrast: high) {

package/v2Components/HtmlEditor/_index.lazy.scss

@@ -13,7 +13,7 @@
   align-items: center;
   min-height: 25rem; // 400px = 25rem
   background: $CAP_G11; // Light background similar to #fafbfc
-  // border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
+  border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
   border-radius: 0.5rem; // 8px = 0.5rem
   flex-direction: column;
   gap: 1rem; // 16px = 1rem

package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss

@@ -31,6 +31,79 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+
+    .cap-button,
+    .ant-btn,
+    button {
+      color: map-get($CAP_PRIMARY, base);
+      border: none;
+      background: $CAP_WHITE;
+      border-radius: 0.25rem;
+      padding: 0.375rem 0.5rem;
+      font-size: 0.875rem;
+      font-family: $FONT_FAMILY;
+      font-weight: 500;
+      height: auto;
+      min-width: 5.9375rem;
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+      line-height: 1.25rem;
+      text-align: left;
+
+      &:hover {
+        background: $CAP_G09;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.375rem 0.75rem -0.125rem rgba(9, 30, 66, 0.25);
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+      }
+
+      &:active,
+      &:focus {
+        background: $CAP_G08;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.125rem 0.25rem -0.125rem rgba(9, 30, 66, 0.25);
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+      }
+
+      .anticon,
+      .cap-icon {
+        font-size: 1rem;
+        color: map-get($CAP_PRIMARY, base);
+      }
+
+      span {
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1.25rem;
+        color: map-get($CAP_PRIMARY, base);
+        white-space: nowrap;
+      }
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+
+    .tooltip-add-label-container {
+
+      .cap-button,
+      .ant-btn {
+        color: map-get($CAP_PRIMARY, base);
+        background: $CAP_WHITE;
+        border: none;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+      }
+    }
+
+    .cap-button-flat,
+    .cap-button-add {
+      background: $CAP_WHITE;
+      color: map-get($CAP_PRIMARY, base);
+      border: none;
+    }
   }
 
   &__content {
@@ -40,7 +113,7 @@
     overflow: auto;
     position: relative;
     height: 100%;
-    max-height: 34.25rem;
+    max-height: 31.25rem;
     background-color: $CAP_G01;
   }
 
@@ -57,17 +130,6 @@
     }
   }
 
-  // Add Label button visibility: 50% opacity while typing, 100% on hover
-  .code-editor-pane__actions {
-    opacity: 0.5; // 50% transparent while typing
-    pointer-events: auto; // Always clickable
-    transition: opacity 0.2s ease;
-    
-    &:hover {
-      opacity: 1; // Fully visible on hover
-    }
-  }
-  
   .cm-foldGutter {
     width: 1rem;
 
@@ -161,7 +223,7 @@
   .codemirror-wrapper {
     position: relative;
     height: 100%;
-    max-height: 34.25rem;
+    max-height: 31.25rem;
     background-color: $CAP_G01;
     border-radius: 0;
     overflow: hidden;
@@ -172,6 +234,31 @@
       top: 0.5rem;
       right: 0.5rem;
       z-index: 20;
+
+      .cap-button,
+      .ant-btn,
+      button {
+        background: $CAP_WHITE;
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+        border-radius: 0.25rem;
+        padding: 0.375rem 0.5rem;
+        font-size: 0.875rem;
+        font-family: $FONT_FAMILY;
+        font-weight: 500;
+        min-width: 5.9375rem;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+
+        &:hover {
+          background: $CAP_G09;
+          color: map-get($CAP_PRIMARY, base);
+        }
+
+        &:active {
+          background: $CAP_G08;
+          color: map-get($CAP_PRIMARY, base);
+        }
+      }
     }
 
     .codemirror-editor {
@@ -209,6 +296,7 @@
       }
 
       .cm-gutters {
+        background-color: var(--editor-gutter-bg, $CAP_G02);
         border-right: 0.0625rem solid var(--editor-border, $CAP_G04);
         color: var(--editor-gutter-foreground, $FONT_COLOR_02);
       }