@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.10

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/__tests__/index.test.js

@@ -7,91 +7,72 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
 import ValidationErrorDisplay from '../index';
 
-// Mock ErrorInfoNote component
-jest.mock('../../../../ErrorInfoNote', () => {
-  return function MockErrorInfoNote({ errorMessages }) {
-    const liquidErrors = errorMessages?.LIQUID_ERROR_MSG || [];
-    const standardErrors = errorMessages?.STANDARD_ERROR_MSG || [];
-    const hasErrors = liquidErrors.length > 0 || standardErrors.length > 0;
-
-    if (!hasErrors) return null;
-
-    return (
-      <div data-testid="error-info-note">
-        {liquidErrors.map((msg, index) => (
-          <div key={`liquid-${index}`} data-testid="error-message">
-            {msg}
-          </div>
-        ))}
-        {standardErrors.map((msg, index) => (
-          <div key={`standard-${index}`} data-testid="error-message">
-            {msg}
-          </div>
-        ))}
-      </div>
-    );
-  };
-});
+// Test wrapper with IntlProvider
+const TestWrapper = ({ children }) => (
+  <IntlProvider locale="en" messages={{}}>
+    {children}
+  </IntlProvider>
+);
+
+// Note: ValidationErrorDisplay uses ValidationTabs, not ErrorInfoNote
+// The tests should check for the actual rendered structure
 
 describe('ValidationErrorDisplay', () => {
   it('renders standard errors when validation has issues', () => {
     const mockValidation = {
       getAllIssues: () => [
-        { message: 'Missing closing tag', severity: 'error', line: 5, column: 10 },
-        { message: 'Invalid attribute', severity: 'error', line: 7 }
-      ],
-      isClean: () => false,
-      isValidating: false
-    };
-
-    render(<ValidationErrorDisplay validation={mockValidation} />);
-
-    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
-    const errorMessages = screen.getAllByTestId('error-message');
-    expect(errorMessages).toHaveLength(2);
-    expect(errorMessages[0]).toHaveTextContent('Missing closing tag Line 5, Char 10.');
-    expect(errorMessages[1]).toHaveTextContent('Invalid attribute Line 7.');
-  });
-
-  it('renders liquid errors separately', () => {
-    const mockValidation = {
-      getAllIssues: () => [
-        { message: 'Invalid liquid syntax', severity: 'error', source: 'liquid-validator', line: 3 },
-        { message: 'HTML error', severity: 'error', source: 'htmlhint', line: 10 }
+        {
+          message: 'Missing closing tag', severity: 'error', line: 5, column: 10,
+        },
+        { message: 'Invalid attribute', severity: 'error', line: 7 },
       ],
       isClean: () => false,
-      isValidating: false
+      isValidating: false,
     };
 
-    render(<ValidationErrorDisplay validation={mockValidation} />);
+    const { container } = render(
+      <TestWrapper>
+        <ValidationErrorDisplay validation={mockValidation} />
+      </TestWrapper>
+    );
 
-    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
-    const errorMessages = screen.getAllByTestId('error-message');
-    expect(errorMessages).toHaveLength(2);
-    // First should be liquid error, second should be standard error
-    expect(errorMessages[0]).toHaveTextContent('Invalid liquid syntax Line 3.');
-    expect(errorMessages[1]).toHaveTextContent('HTML error Line 10.');
+    // Check for validation-error-display wrapper
+    expect(container.querySelector('.validation-error-display')).toBeInTheDocument();
+    // Check for validation-tabs component
+    expect(container.querySelector('.validation-tabs')).toBeInTheDocument();
+    // Check that error messages are rendered
+    expect(screen.getByText('Missing closing tag')).toBeInTheDocument();
+    expect(screen.getByText('Invalid attribute')).toBeInTheDocument();
   });
 
   it('does not render when validation has no errors', () => {
     const mockValidation = {
       getAllIssues: () => [],
       isClean: () => true,
-      isValidating: false
+      isValidating: false,
     };
 
-    const { container } = render(<ValidationErrorDisplay validation={mockValidation} />);
+    const { container } = render(
+      <TestWrapper>
+        <ValidationErrorDisplay validation={mockValidation} />
+      </TestWrapper>
+    );
 
-    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
+    expect(container.querySelector('.validation-error-display')).not.toBeInTheDocument();
     expect(container.firstChild).toBeNull();
   });
 
   it('does not render when validation is null', () => {
-    const { container } = render(<ValidationErrorDisplay validation={null} />);
+    const { container } = render(
+      <TestWrapper>
+        <ValidationErrorDisplay validation={null} />
+      </TestWrapper>
+    );
 
-    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
+    expect(container.querySelector('.validation-error-display')).not.toBeInTheDocument();
     expect(container.firstChild).toBeNull();
   });
 
@@ -99,12 +80,16 @@ describe('ValidationErrorDisplay', () => {
     const mockValidation = {
       getAllIssues: () => [],
       isClean: () => false,
-      isValidating: true
+      isValidating: true,
     };
 
-    const { container } = render(<ValidationErrorDisplay validation={mockValidation} />);
+    const { container } = render(
+      <TestWrapper>
+        <ValidationErrorDisplay validation={mockValidation} />
+      </TestWrapper>
+    );
 
-    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
+    expect(container.querySelector('.validation-error-display')).not.toBeInTheDocument();
     expect(container.firstChild).toBeNull();
   });
 
@@ -112,11 +97,13 @@ describe('ValidationErrorDisplay', () => {
     const mockValidation = {
       getAllIssues: () => [{ message: 'Error', severity: 'error' }],
       isClean: () => false,
-      isValidating: false
+      isValidating: false,
     };
 
     const { container } = render(
-      <ValidationErrorDisplay validation={mockValidation} className="custom-class" />
+      <TestWrapper>
+        <ValidationErrorDisplay validation={mockValidation} className="custom-class" />
+      </TestWrapper>
     );
 
     const wrapper = container.querySelector('.validation-error-display');
@@ -127,26 +114,37 @@ describe('ValidationErrorDisplay', () => {
     const mockValidation = {
       getAllIssues: () => [{ message: 'Mobile error', severity: 'error' }],
       isClean: () => false,
-      isValidating: false
+      isValidating: false,
     };
 
-    render(<ValidationErrorDisplay validation={mockValidation} variant="inapp" />);
+    const { container } = render(
+      <TestWrapper>
+        <ValidationErrorDisplay validation={mockValidation} variant="inapp" />
+      </TestWrapper>
+    );
 
-    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
-    expect(screen.getByTestId('error-message')).toHaveTextContent('Mobile error');
+    expect(container.querySelector('.validation-error-display')).toBeInTheDocument();
+    expect(screen.getByText('Mobile error')).toBeInTheDocument();
   });
 
   it('includes rule information in error messages when available', () => {
     const mockValidation = {
       getAllIssues: () => [
-        { message: 'Alt attribute required', severity: 'error', rule: 'alt-require', line: 5 }
+        {
+          message: 'Alt attribute required', severity: 'error', rule: 'alt-require', line: 5,
+        },
       ],
       isClean: () => false,
-      isValidating: false
+      isValidating: false,
     };
 
-    render(<ValidationErrorDisplay validation={mockValidation} />);
+    render(
+      <TestWrapper>
+        <ValidationErrorDisplay validation={mockValidation} />
+      </TestWrapper>
+    );
 
-    expect(screen.getByTestId('error-message')).toHaveTextContent('Alt attribute required Line 5. • alt-require');
+    // Check that the error message is rendered (rule info may be in tooltip or separate element)
+    expect(screen.getByText('Alt attribute required')).toBeInTheDocument();
   });
 });

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/index.js

@@ -1,18 +1,15 @@
 /**
- * ValidationErrorDisplay - HTML Editor validation using ErrorInfoNote
+ * ValidationErrorDisplay - HTML Editor validation display
  *
- * This component integrates the existing ErrorInfoNote component with the HTML Editor's
- * validation system, providing a consistent error display that matches the Figma design.
+ * This component displays validation errors using the new ValidationTabs component
+ * with tabbed interface for HTML, Label, and Liquid issues.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import ErrorInfoNote from '../../../ErrorInfoNote';
-
-import { transformValidationToErrorInfo, hasValidationErrors } from '../../utils/validationAdapter';
-import { HTML_EDITOR_VARIANTS } from '../../constants';
+import { hasValidationErrors } from '../../utils/validationAdapter';
+import ValidationTabs from '../ValidationTabs';
 
 // Styles
 import './_validationErrorDisplay.scss';
@@ -20,51 +17,72 @@ import './_validationErrorDisplay.scss';
 /**
  * ValidationErrorDisplay Component
  *
- * Displays validation errors using the existing ErrorInfoNote component
+ * Displays validation errors using the ValidationTabs component
  */
 const ValidationErrorDisplay = ({
   validation,
-  variant = HTML_EDITOR_VARIANTS.EMAIL,
   onErrorClick,
-  className = ''
+  onClose,
+  isLiquidEnabled = false,
+  className = '',
 }) => {
-  // Don't render if no validation or no errors
-  if (!hasValidationErrors(validation)) {
-    return null;
-  }
+  // Track if panel is dismissed
+  const [isDismissed, setIsDismissed] = useState(false);
 
-  // Transform validation data to ErrorInfoNote format
-  const errorData = transformValidationToErrorInfo(validation, variant);
-  const { errorMessages } = errorData || {};
-
-  // Handle error click if provided
-  const handleErrorClick = (error) => {
-    onErrorClick?.(error);
+  // Handle close - dismiss temporarily
+  const handleClose = () => {
+    setIsDismissed(true);
+    if (onClose) {
+      onClose();
+    }
   };
 
+  // Reset dismissed state when validation changes (new errors appear)
+  React.useEffect(() => {
+    if (hasValidationErrors(validation)) {
+      setIsDismissed(false);
+    }
+  }, [validation]);
+
+  // Don't render if no validation, no errors, or dismissed
+  if (!hasValidationErrors(validation) || isDismissed) {
+    return null;
+  }
+
   return (
-    <CapRow
+    <div
       className={`validation-error-display ${className}`}
       role="alert"
       aria-live="polite"
       aria-label="Validation errors"
     >
-      <ErrorInfoNote
-        errorMessages={errorMessages}
-        onErrorClick={handleErrorClick}
+      <ValidationTabs
+        validation={validation}
+        onErrorClick={onErrorClick}
+        onClose={handleClose}
+        isLiquidEnabled={isLiquidEnabled}
       />
-    </CapRow>
+    </div>
   );
 };
 
 ValidationErrorDisplay.propTypes = {
   validation: PropTypes.shape({
     isValidating: PropTypes.bool,
-    getAllIssues: PropTypes.func
+    getAllIssues: PropTypes.func,
   }),
-  variant: PropTypes.oneOf(Object.values(HTML_EDITOR_VARIANTS)),
   onErrorClick: PropTypes.func,
-  className: PropTypes.string
+  onClose: PropTypes.func,
+  isLiquidEnabled: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+ValidationErrorDisplay.defaultProps = {
+  validation: null,
+  onErrorClick: null,
+  onClose: null,
+  isLiquidEnabled: false,
+  className: '',
 };
 
 export default ValidationErrorDisplay;

package/v2Components/HtmlEditor/components/ValidationTabs/_validationTabs.scss

@@ -0,0 +1,254 @@
+/**
+ * ValidationTabs Styles
+ */
+
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.validation-tabs {
+  overflow-y: hidden;
+  width: 100%;
+  background-color: $CAP_COLOR_05; // Light pink background
+  border-radius: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  box-sizing: border-box;
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__tabs {
+    flex: 1;
+    
+    // Override CapTab styles for proper spacing
+    .cap-tab-v2 {
+      .ant-tabs-nav {
+        margin-bottom: 0;
+        
+        &::before {
+          border-bottom: none;
+        }
+      }
+
+      .ant-tabs-tab {
+        padding: 0.5rem 0.75rem; // Add horizontal padding for spacing
+        margin-right: 0; // Remove margin, use padding instead
+        color: $CAP_G03;
+        font-size: 0.875rem;
+        font-weight: 500;
+        
+        & + .ant-tabs-tab {
+          margin-left: 1.5rem; // Add space between tabs
+        }
+        
+        &:hover {
+          color: $CAP_COLOR_05;
+          background: transparent;
+        }
+
+        &.ant-tabs-tab-active {
+          .ant-tabs-tab-btn {
+            color: $CAP_COLOR_05;
+            font-weight: 600;
+          }
+        }
+      }
+
+      .ant-tabs-ink-bar {
+        background-color: $CAP_COLOR_05;
+        height: 0.125rem;
+      }
+
+      .ant-tabs-content-holder {
+        padding-top: 0.25rem; // Reduced from 0.5rem
+        padding-bottom: 0; // No bottom padding
+      }
+    }
+  }
+
+  &__tab-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  &__tab-count {
+    color: inherit;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+    padding-top: 0.5rem;
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: $CAP_G03;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba($CAP_COLOR_05, 0.1);
+      color: $CAP_COLOR_05;
+    }
+
+    .cap-icon-v2 {
+      font-size: 0.875rem;
+    }
+  }
+
+  &__content {
+    max-height: 15rem; // Limit height for many errors
+    overflow-y: auto;
+    padding-right: 0.25rem;
+    padding-bottom: 0; // Remove bottom padding completely
+
+    // Custom scrollbar
+    &::-webkit-scrollbar {
+      width: 0.375rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $CAP_G06;
+      border-radius: 0.1875rem;
+
+      &:hover {
+        background-color: $CAP_G04;
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.25rem 0; // Reduced from 0.375rem
+    border-bottom: 1px solid rgba($CAP_G06, 0.3);
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0.25rem; // Minimal padding on last item
+    }
+
+    &--error {
+      .validation-tabs__icon--error {
+        color: $CAP_RED;
+      }
+    }
+
+    &--warning {
+      .validation-tabs__icon--warning {
+        color: $CAP_YELLOW;
+      }
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding-top: 0.125rem;
+  }
+
+  &__icon {
+    font-size: 0.875rem;
+
+    &--error {
+      color: $CAP_RED;
+    }
+
+    &--warning {
+      color: $CAP_YELLOW;
+    }
+  }
+
+  &__item-content {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: $CAP_G01;
+  }
+
+  &__item-message {
+    color: $CAP_G01;
+  }
+
+  &__item-location {
+    color: $CAP_G03;
+    white-space: nowrap;
+  }
+
+  &__item-rule {
+    color: $CAP_G04;
+    font-family: monospace;
+    font-size: 0.6875rem;
+  }
+
+  &__item-navigate {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: $CAP_G04;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba($CAP_G01, 0.1);
+      color: $CAP_G01;
+    }
+
+    .anticon {
+      font-size: 0.75rem;
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .validation-tabs {
+    padding: 0.375rem 0.5rem;
+
+    &__tabs {
+      .ant-tabs-tab {
+        margin-right: 1rem;
+        font-size: 0.8125rem;
+      }
+    }
+
+    &__content {
+      max-height: 10rem;
+    }
+
+    &__item-content {
+      font-size: 0.6875rem;
+    }
+  }
+}