@capillarytech/creatives-library 8.0.262-alpha.0 → 8.0.262

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -46,9 +46,7 @@ const mockGetAllIssues = jest.fn(() => []);
 const mockGetValidationState = jest.fn(() => ({
   isValidating: false,
   hasErrors: false,
-  issueCounts: {
-    html: 0, label: 0, liquid: 0, total: 0,
-  },
+  issueCounts: { errors: 0, warnings: 0, total: 0 },
 }));
 
 // Mock HtmlEditor - it exports a lazy-loaded component by default
@@ -62,12 +60,10 @@ jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
       isContentEmpty: () => !props.initialContent || (typeof props.initialContent === 'string' && props.initialContent.trim() === ''),
       getIssueCounts: () => {
         const issues = mockGetAllIssues();
-        return {
-          html: issues.filter((i) => i.source === 'htmlhint' || i.source === 'css-validator').length,
-          label: issues.filter((i) => i.rule === 'tag-pair' || i.message?.includes('tag must be paired')).length,
-          liquid: issues.filter((i) => i.source === 'liquid-validator').length,
-          total: issues.length,
-        };
+        const total = issues.length;
+        const errors = issues.filter((i) => (i.source === 'liquid-validator' && i.severity === 'error')
+          || ['liquid-api-validation', 'standard-api-validation'].includes(i.rule)).length;
+        return { errors, warnings: total - errors, total };
       },
     }));
 
@@ -94,9 +90,7 @@ jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
         <button
           onClick={() => props.onValidationChange && props.onValidationChange({
             isContentEmpty: false,
-            issueCounts: {
-              html: 0, label: 0, liquid: 0, total: 0,
-            },
+            issueCounts: { errors: 0, warnings: 0, total: 0 },
             validationComplete: true,
             hasErrors: false,
           })}
@@ -122,12 +116,10 @@ jest.mock('../../../../v2Components/HtmlEditor', () => {
       isContentEmpty: () => !props.initialContent || (typeof props.initialContent === 'string' && props.initialContent.trim() === ''),
       getIssueCounts: () => {
         const issues = mockGetAllIssues();
-        return {
-          html: issues.filter((i) => i.source === 'htmlhint' || i.source === 'css-validator').length,
-          label: issues.filter((i) => i.rule === 'tag-pair' || i.message?.includes('tag must be paired')).length,
-          liquid: issues.filter((i) => i.source === 'liquid-validator').length,
-          total: issues.length,
-        };
+        const total = issues.length;
+        const errors = issues.filter((i) => (i.source === 'liquid-validator' && i.severity === 'error')
+          || ['liquid-api-validation', 'standard-api-validation'].includes(i.rule)).length;
+        return { errors, warnings: total - errors, total };
       },
     }));
 
@@ -154,9 +146,7 @@ jest.mock('../../../../v2Components/HtmlEditor', () => {
         <button
           onClick={() => props.onValidationChange && props.onValidationChange({
             isContentEmpty: false,
-            issueCounts: {
-              html: 0, label: 0, liquid: 0, total: 0,
-            },
+            issueCounts: { errors: 0, warnings: 0, total: 0 },
             validationComplete: true,
             hasErrors: false,
           })}
@@ -426,9 +416,7 @@ describe('EmailHTMLEditor', () => {
     mockGetValidationState.mockReturnValue({
       isValidating: false,
       hasErrors: false,
-      issueCounts: {
-        html: 0, label: 0, liquid: 0, total: 0,
-      },
+      issueCounts: { errors: 0, warnings: 0, total: 0 },
     });
     // Reset hasLiquidSupportFeature mock to return true by default
     mockHasLiquidSupportFeature.mockReturnValue(true);
@@ -878,7 +866,7 @@ describe('EmailHTMLEditor', () => {
         isValidating: false,
         hasErrors: true,
         issueCounts: {
-          html: 0, label: 0, liquid: 0, total: 1,
+          errors: 0, warnings: 1, total: 1,
         },
       });
 
@@ -921,7 +909,7 @@ describe('EmailHTMLEditor', () => {
         isValidating: false,
         hasErrors: true,
         issueCounts: {
-          html: 0, label: 0, liquid: 0, total: 1,
+          errors: 0, warnings: 1, total: 1,
         },
       });
 
@@ -963,7 +951,7 @@ describe('EmailHTMLEditor', () => {
         isValidating: false,
         hasErrors: true,
         issueCounts: {
-          html: 0, label: 0, liquid: 1, total: 1,
+          errors: 1, warnings: 0, total: 1,
         },
       });
 
@@ -2149,9 +2137,8 @@ describe('EmailHTMLEditor', () => {
 
       const issueCounts = ref.current.getIssueCounts();
       expect(issueCounts).toEqual({
-        html: expect.any(Number),
-        label: expect.any(Number),
-        liquid: expect.any(Number),
+        errors: expect.any(Number),
+        warnings: expect.any(Number),
         total: expect.any(Number),
       });
     });
@@ -2201,7 +2188,7 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('getIssueCounts returns default object with zeros (lines 168-170)', async () => {
-      // This covers lines 168-170: return { html: 0, label: 0, liquid: 0, total: 0 };
+      // This covers default return: { errors: 0, warnings: 0, total: 0 };
       const ref = React.createRef();
 
       render(
@@ -2218,18 +2205,16 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
 
       // When htmlEditorRef.current?.getIssueCounts is not available,
-      // the default return value should be { html: 0, label: 0, liquid: 0, total: 0 }
+      // the default return value should be { errors: 0, warnings: 0, total: 0 }
       const issueCounts = ref.current.getIssueCounts();
       expect(issueCounts).toEqual({
-        html: expect.any(Number),
-        label: expect.any(Number),
-        liquid: expect.any(Number),
+        errors: expect.any(Number),
+        warnings: expect.any(Number),
         total: expect.any(Number),
       });
       // Verify all keys exist
-      expect(issueCounts.html).toBeDefined();
-      expect(issueCounts.label).toBeDefined();
-      expect(issueCounts.liquid).toBeDefined();
+      expect(issueCounts.errors).toBeDefined();
+      expect(issueCounts.warnings).toBeDefined();
       expect(issueCounts.total).toBeDefined();
     });
 

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -14,8 +14,10 @@ export default css`
       margin: 0 auto;
       width: 100%;
       padding: ${CAP_SPACE_24} 0;
-      .ant-tabs-content{
-        margin-top: ${CAP_SPACE_16}
+      /* Only main channel tabs content, not HTML Editor validation panel tabs */
+      > .cap-tab-v2 > .ant-tabs-content-holder > .ant-tabs-content,
+      > .cap-tab-v2 > .ant-tabs-content {
+        margin-top: ${CAP_SPACE_16};
       }
     ` : `.cap-tab-v2 {
       height: calc(100vh - 11.25rem);