@capillarytech/creatives-library 8.0.262-alpha.1 → 8.0.263

package/v2Components/HtmlEditor/__tests__/HTMLEditor.apiErrors.test.js

@@ -465,9 +465,8 @@ describe('HTMLEditor - API Validation Errors', () => {
         expect.objectContaining({
           validationComplete: false,
           issueCounts: expect.objectContaining({
-            html: 0,
-            label: 0,
-            liquid: 0,
+            errors: 0,
+            warnings: 0,
             total: 0,
           }),
         })
@@ -704,13 +703,12 @@ describe('HTMLEditor - API Validation Errors', () => {
 
       renderWithIntl({ onValidationChange });
 
-      // Should categorize as HTML issue
+      // HTML hint issues are non-blocking (warnings)
       expect(onValidationChange).toHaveBeenCalledWith(
         expect.objectContaining({
           issueCounts: expect.objectContaining({
-            html: 1,
-            label: 0,
-            liquid: 0,
+            errors: 0,
+            warnings: 1,
             total: 1,
           }),
         })
@@ -742,13 +740,12 @@ describe('HTMLEditor - API Validation Errors', () => {
 
       renderWithIntl({ onValidationChange });
 
-      // Should categorize as label issue
+      // Label/tag-pair issues are non-blocking (warnings)
       expect(onValidationChange).toHaveBeenCalledWith(
         expect.objectContaining({
           issueCounts: expect.objectContaining({
-            html: 0,
-            label: 1,
-            liquid: 0,
+            errors: 0,
+            warnings: 1,
             total: 1,
           }),
         })
@@ -780,13 +777,12 @@ describe('HTMLEditor - API Validation Errors', () => {
 
       renderWithIntl({ onValidationChange });
 
-      // Should categorize as liquid issue
+      // Liquid-validator with severity error is blocking (errors)
       expect(onValidationChange).toHaveBeenCalledWith(
         expect.objectContaining({
           issueCounts: expect.objectContaining({
-            html: 0,
-            label: 0,
-            liquid: 1,
+            errors: 1,
+            warnings: 0,
             total: 1,
           }),
         })

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -3106,19 +3106,18 @@ describe('HTMLEditor', () => {
       });
 
       const issueCounts = ref.current.getIssueCounts();
+      // None of the mock issues are blocking (no BLOCKING_ERROR_RULE_IDS, liquid has no severity 'error')
       expect(issueCounts).toEqual({
-        html: 1,
-        label: 1,
-        liquid: 1,
+        errors: 0,
+        warnings: 3,
         total: 3,
       });
 
       const validationState = ref.current.getValidationState();
       expect(validationState.hasErrors).toBe(true);
       expect(validationState.issueCounts).toEqual({
-        html: 1,
-        label: 1,
-        liquid: 1,
+        errors: 0,
+        warnings: 3,
         total: 3,
       });
     });
@@ -3150,10 +3149,10 @@ describe('HTMLEditor', () => {
       });
 
       expect(ref.current.getIssueCounts()).toEqual({
-        html: 0, label: 0, liquid: 0, total: 0,
+        errors: 0, warnings: 0, total: 0,
       });
       expect(ref.current.getValidationState().issueCounts).toEqual({
-        html: 0, label: 0, liquid: 0, total: 0,
+        errors: 0, warnings: 0, total: 0,
       });
     });
   });

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -88,12 +88,12 @@
 
       &__content {
         height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 50%);
+        max-height: calc(95vh - 30%);
       }
 
       iframe {
         height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 50%);
+        max-height: calc(95vh - 30%);
       }
     }
   }
@@ -281,12 +281,12 @@
 
       &__content {
         height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 50%);
+        max-height: calc(95vh - 30%);
       }
 
       iframe {
         height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 50%);
+        max-height: calc(95vh - 30%);
       }
     }
   }
@@ -299,12 +299,12 @@
 
     &__content {
       height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-      max-height: calc(95vh - 50%);
+      max-height: calc(95vh - 30%);
     }
 
     iframe {
       height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-      max-height: calc(95vh - 50%);
+      max-height: calc(95vh - 30%);
     }
   }
 }

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

@@ -66,7 +66,7 @@
 
   // Add Label button visibility: 50% opacity while typing, 100% on hover
   .code-editor-pane__actions {
-    opacity: 0.7; // 70% transparent while typing
+    opacity: 0.8; // 80% transparent while typing
     pointer-events: auto; // Always clickable
     transition: opacity 0.2s ease;
     

package/v2Components/HtmlEditor/components/EditorToolbar/_editorToolbar.scss

@@ -20,7 +20,6 @@
   &__left {
     display: flex;
     align-items: center;
-    gap: 1rem;
     flex-shrink: 0;
   }
 

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

@@ -12,17 +12,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Layout, Typography } from 'antd';
-import { injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import { FONT_COLOR_01, CAP_SPACE_08, CAP_SPACE_02 } from '@capillarytech/cap-ui-library/styled/variables';
 
 // Component imports
 import { useEditorContext } from '../common/EditorContext';
 
 // Constants
-import { HTML_EDITOR_VARIANTS } from '../../constants';
+import { HTML_EDITOR_VARIANTS, LIQUID_DOC_URL } from '../../constants';
 
 // Styles
 import './_editorToolbar.scss';
@@ -66,6 +68,29 @@ const EditorToolbar = ({
               : intl.formatMessage(messages.htmlEditor)
             }
           </Text>
+          <CapTooltipWithInfo
+            title={(
+              <FormattedMessage
+                {...messages.htmlEditorTooltip}
+                values={{
+                  docLink: (
+                    <a
+                      href={LIQUID_DOC_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <FormattedMessage {...messages.viewDocumentation} />
+                    </a>
+                  ),
+                }}
+              />
+            )}
+            infoIconProps={{
+              style: { marginLeft: CAP_SPACE_08, color: FONT_COLOR_01 },
+            }}
+            autoAdjustOverflow
+            placement="top"
+          />
         </CapRow>
       )}
 

package/v2Components/HtmlEditor/components/PreviewPane/_previewPane.scss

@@ -6,7 +6,7 @@
 
 .preview-pane {
   height: 100%;
-  max-height: 31.25rem;
+  max-height: 33.25rem;
   position: relative;
   background-color: $CAP_G09;
   padding: 1rem;
@@ -67,8 +67,8 @@
   }
 
   &__content {
-    height: calc(100% - 2rem);
-    max-height: 28.125rem;
+    height: calc(100%);
+    max-height: 34.25rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -83,7 +83,7 @@
     background-color: $CAP_WHITE;
     width: 100%;
     height: 28.125rem;
-    max-height: 31.25rem;
+    max-height: 34.25rem;
 
     &--mobile {
       // Width and height now controlled by React inline styles

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/_validationErrorDisplay.scss

@@ -1,5 +1,7 @@
 /**
  * ValidationErrorDisplay Styles
+ *
+ * When collapsed, panel sticks to footer (header bar only visible).
  */
 
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
@@ -9,6 +11,7 @@
   flex-direction: column;
   width: 100%;
   margin-bottom: 1rem;
+  flex-shrink: 0;
 
   // Ensure proper spacing when used in different contexts
   &:last-child {
@@ -16,6 +19,12 @@
     padding-bottom: 0.25rem;
   }
 
+  // Collapsed: panel stays in footer as a slim bar (tabs + expand arrow only)
+  &--collapsed {
+    margin-bottom: 0;
+    padding-bottom: 0.25rem;
+  }
+
   // Integration with ErrorInfoNote component
   .error-info-note {
     width: 100%;
@@ -24,9 +33,17 @@
   // Responsive adjustments
   @media (max-width: 768px) {
     margin-bottom: 0.75rem;
+
+    &.validation-error-display--collapsed {
+      margin-bottom: 0;
+    }
   }
 
   @media (max-width: 576px) {
     margin-bottom: 0.5rem;
+
+    &.validation-error-display--collapsed {
+      margin-bottom: 0;
+    }
   }
 }

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

@@ -1,8 +1,8 @@
 /**
  * ValidationErrorDisplay - HTML Editor validation display
  *
- * This component displays validation errors using the new ValidationTabs component
- * with tabbed interface for HTML, Label, and Liquid issues.
+ * Displays validation errors and warnings in two tabs (Errors, Warnings).
+ * Panel can be collapsed to a sticky footer bar; it does not disappear.
  */
 
 import React, { useState } from 'react';
@@ -17,41 +17,31 @@ import './_validationErrorDisplay.scss';
 /**
  * ValidationErrorDisplay Component
  *
- * Displays validation errors using the ValidationTabs component
+ * Displays validation issues in Errors and Warnings tabs; collapse toggles visibility but panel stays in footer.
  */
 const ValidationErrorDisplay = ({
   validation,
   onErrorClick,
-  onClose,
-  isLiquidEnabled = false,
   className = '',
 }) => {
-  // Track if panel is dismissed
-  const [isDismissed, setIsDismissed] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
-  // Handle close - dismiss temporarily
-  const handleClose = () => {
-    setIsDismissed(true);
-    if (onClose) {
-      onClose();
-    }
+  const handleToggleCollapse = () => {
+    setIsCollapsed((prev) => !prev);
   };
 
-  // Reset dismissed state when validation changes (new errors appear)
-  React.useEffect(() => {
-    if (hasValidationErrors(validation)) {
-      setIsDismissed(false);
-    }
-  }, [validation]);
+  // Expand panel when user clicks redirection (so panel does not stay stuck to footer)
+  const handleExpand = () => {
+    setIsCollapsed(false);
+  };
 
-  // Don't render if no validation, no errors, or dismissed
-  if (!hasValidationErrors(validation) || isDismissed) {
+  if (!hasValidationErrors(validation)) {
     return null;
   }
 
   return (
     <div
-      className={`validation-error-display ${className}`}
+      className={`validation-error-display ${isCollapsed ? 'validation-error-display--collapsed' : ''} ${className}`}
       role="alert"
       aria-live="polite"
       aria-label="Validation errors"
@@ -59,8 +49,9 @@ const ValidationErrorDisplay = ({
       <ValidationTabs
         validation={validation}
         onErrorClick={onErrorClick}
-        onClose={handleClose}
-        isLiquidEnabled={isLiquidEnabled}
+        isCollapsed={isCollapsed}
+        onToggleCollapse={handleToggleCollapse}
+        onExpand={handleExpand}
       />
     </div>
   );
@@ -72,16 +63,12 @@ ValidationErrorDisplay.propTypes = {
     getAllIssues: PropTypes.func,
   }),
   onErrorClick: PropTypes.func,
-  onClose: PropTypes.func,
-  isLiquidEnabled: PropTypes.bool,
   className: PropTypes.string,
 };
 
 ValidationErrorDisplay.defaultProps = {
   validation: null,
   onErrorClick: null,
-  onClose: null,
-  isLiquidEnabled: false,
   className: '',
 };
 

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

@@ -27,6 +27,7 @@ import messages from './messages';
 import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
 import './_validationPanel.scss';
 import { SEVERITY } from './constants';
+import { ISSUE_SOURCES } from '../../utils/validationConstants';
 
 const { Panel } = Collapse;
 /**
@@ -38,7 +39,6 @@ const ValidationPanel = ({
   onErrorClick,
   showLineNumbers = true,
   groupBySource = false,
-  variant = 'email',
 }) => {
   const [activeKeys, setActiveKeys] = useState(['errors', 'warnings']);
 
@@ -73,7 +73,7 @@ const ValidationPanel = ({
       return true;
     }
     // Client-side Liquid validation errors are blocking (genuine syntax errors)
-    if (source === 'liquid-validator' && severity === 'error') {
+    if (source === ISSUE_SOURCES.LIQUID && severity === SEVERITY.ERROR) {
       return true;
     }
     // Rule Group #1 errors are blocking
@@ -85,23 +85,6 @@ const ValidationPanel = ({
 
   // Get icon for issue type
   // Blocking errors use error-icon, warnings use warning
-  const getIssueIcon = (issue) => {
-    const { source, severity } = issue || {};
-    if (source === 'security') {
-      return <ShieldOutlined className="validation-issue__icon validation-issue__icon--security" />;
-    }
-
-    // Only show error icon for blocking errors (API errors or Rule Group #1)
-    if (isBlockingError(issue)) {
-      return <CapIcon type="error-icon" className="validation-issue__icon validation-issue__icon--error" />;
-    }
-
-    // All other issues show as warnings
-    if (severity === SEVERITY.INFO) {
-      return <CapIcon type="info" className="validation-issue__icon validation-issue__icon--info" />;
-    }
-    return <CapIcon type="warning" className="validation-issue__icon validation-issue__icon--warning" />;
-  };
 
   // Get source icon
   const getSourceIcon = (source) => {
@@ -145,9 +128,6 @@ const ValidationPanel = ({
         }
       }}
     >
-      <div className="validation-issue__icon">
-        {getIssueIcon(issue)}
-      </div>
 
       <div className="validation-issue__content">
         <div className="validation-issue__message">
@@ -184,24 +164,21 @@ const ValidationPanel = ({
   );
 
   // Render panel header with count
-  const renderPanelHeader = (title, count, severity, issues = []) => {
-    // Check if any issue in this group is a blocking error
-    const hasBlocking = issues.some((issue) => isBlockingError(issue));
-    // Use blocking error icon only if there are blocking errors, otherwise use warning icon
-    const iconIssue = hasBlocking ? { rule: 'blocking', source: 'blocking' } : { severity: 'warning' };
+  const renderPanelHeader = (title, count, severity, issues = []) =>
+  // Check if any issue in this group is a blocking error
+  // Use blocking error icon only if there are blocking errors, otherwise use warning icon
 
-    return (
+    (
       <div className="validation-panel__header">
         <span className="validation-panel__title">
-          {getIssueIcon(iconIssue)}
           <FormattedMessage {...title} />
         </span>
         {count > 0 && (
           <Badge count={count} style={{ backgroundColor: getSeverityColor(severity) }} />
         )}
       </div>
-    );
-  };
+    )
+  ;
 
   // Get severity color
   const getSeverityColor = (severity) => {
@@ -270,8 +247,8 @@ const ValidationPanel = ({
             : messages[key] || { id: `htmlEditor.validation.${key}`, defaultMessage: key };
 
           const severity = isSourceGroup
-            ? (issues.find((i) => i.severity === 'error') ? 'error'
-              : issues.find((i) => i.severity === 'warning') ? 'warning' : 'info')
+            ? (issues.find((i) => i.severity === SEVERITY.ERROR) ? SEVERITY.ERROR
+              : issues.find((i) => i.severity === SEVERITY.WARNING) ? SEVERITY.WARNING : SEVERITY.INFO)
             : key;
 
           return (

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

@@ -23,7 +23,8 @@
     // Override CapTab styles for proper spacing
     .cap-tab-v2 {
       .ant-tabs-bar {
-        padding: 0.5rem 0.5rem;
+        padding-right: 0.5rem;
+        padding-top: 0.5rem;
       }
       .ant-tabs-nav {
         margin-bottom: 0;
@@ -36,27 +37,31 @@
       .ant-tabs-tab {
         padding: 0.5rem 0.75rem; // Add horizontal padding for spacing
         margin-right: 0; // Remove margin, use padding instead
-        
-        color: $CAP_G03;
+
+        color: $CAP_G04;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1;
         letter-spacing: 0;
         border-radius: 0.25rem;
         border-bottom: none; // Remove bottom border
-        
-        & + .ant-tabs-tab {
-          margin-left: 1.5rem; // Add space between tabs
+
+        &.ant-tabs-tab {
+          margin-left: 1rem; // Add space between tabs
+          font-weight: 400;
         }
-        
+
         &:hover {
           color: $CAP_COLOR_05;
         }
 
         &.ant-tabs-tab-active {
+          color: $FONT_COLOR_01;
+          font-weight: 500;
+
           .ant-tabs-tab-btn {
-            color: $CAP_COLOR_05;
-            font-weight: 600;
+            color: $FONT_COLOR_01;
+            font-weight: 500;
           }
         }
       }
@@ -70,12 +75,20 @@
         padding-bottom: 0; // No bottom padding
       }
     }
+
+    .ant-tabs-content {
+      margin-top: $CAP_SPACE_08;
+    }
   }
 
   &__tab-label {
     display: flex;
     align-items: center;
     gap: 0.25rem;
+
+    &--warnings {
+      color: $CAP_G01;
+    }
   }
 
   &__tab-count {
@@ -89,7 +102,7 @@
     padding-top: 0.5rem;
   }
 
-  &__close {
+  &__collapse-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -106,12 +119,27 @@
     .cap-icon-v2 {
       font-size: 0.875rem;
     }
+
+    &:hover {
+      color: $CAP_COLOR_05;
+    }
+  }
+
+  // When collapsed: hide tab content so only header (tabs + arrow) sticks to footer
+  &--collapsed {
+    .ant-tabs-content-holder,
+    .ant-tabs-content,
+    .ant-tabs-tabpane {
+      display: none !important;
+    }
   }
 
   &__content {
-    max-height: 15rem; // Limit height for many errors
+    height: 8rem; // Limit height for many errors
+    max-height: 12.5rem;
     overflow-y: auto;
     padding-bottom: 0; // Remove bottom padding completely
+    margin-left:2%;
 
     // Custom scrollbar
     &::-webkit-scrollbar {
@@ -135,8 +163,7 @@
   &__item {
     display: flex;
     align-items: flex-start;
-    gap: 0.5rem;
-    padding: 0.5rem 0.5rem; // Reduced from 0.375rem
+    padding: 0.1rem 0.5rem; // Reduced from 0.375rem
     margin-bottom: 3px;
 
     &:last-child {
@@ -155,6 +182,9 @@
     }
 
     &--warning {
+      .validation-tabs__icon--warning {
+        color: $CAP_G01;
+      }
       .validation-tabs__item-message {
         color: $CAP_G01;
       }
@@ -176,6 +206,10 @@
     &--error {
       color: $CAP_RED;
     }
+
+    &--warning {
+      color: $CAP_G01;
+    }
   }
 
   &__item-content {
@@ -232,6 +266,7 @@
       .ant-tabs-tab {
         margin-right: 1rem;
         font-size: 0.8125rem;
+        font-weight: 400;
       }
     }