Merge pull request #6274 from Sage/FE-6026-text-editor-validations

FE-6026 text editor validations

cypress/components/text-editor/text-editor.cy.tsx

@@ -6,6 +6,8 @@ import {
   TextEditorCustomValidation,
 } from "../../../src/components/text-editor/text-editor-test.stories";
 
+import { WithNewValidation as TextEditorNewValidation } from "../../../src/components/text-editor/text-editor.stories";
+
 import {
   textEditorInput,
   textEditorCounter,
@@ -45,7 +47,7 @@ context("Test for TextEditor component", () => {
       CypressMountWithProviders(<TextEditorCustom />);
 
       textEditorInput().clear().type(textForInput);
-      textEditorCounter().should("have.text", 2982);
+      textEditorCounter().should("have.text", "2,982 characters left");
     });
 
     it.each(["bold", "italic"])(
@@ -200,7 +202,7 @@ context("Test for TextEditor component", () => {
 
       textEditorInput().clear().type(longText);
 
-      textEditorCounter().should("have.text", 0);
+      textEditorCounter().should("have.text", "0 characters left");
       innerText().should("have.text", longTextAssert);
     });
 
@@ -443,5 +445,11 @@ context("Test for TextEditor component", () => {
         cy.checkAccessibility();
       }
     );
+
+    it("should pass accessibility tests for TextEditor validation when opt in flag is set", () => {
+      CypressMountWithProviders(<TextEditorNewValidation />);
+
+      cy.checkAccessibility();
+    });
   });
 });

cypress/locators/text-editor/index.js

@@ -1,13 +1,12 @@
-import { LINK } from "../locators";
+import { CHARACTER_COUNT, LINK } from "../locators";
 import {
   TEXT_EDITOR_CONTAINER,
-  TEXT_EDITOR_COUNTER,
   TEXT_EDITOR_INPUT,
   TEXT_EDITOR_TOOLBAR,
 } from "./locators";
 
 // component preview locators
-export const textEditorCounter = () => cy.get(TEXT_EDITOR_COUNTER);
+export const textEditorCounter = () => cy.get(CHARACTER_COUNT);
 export const textEditorInput = () => cy.get(TEXT_EDITOR_INPUT);
 export const textEditorToolbar = (buttonType) =>
   cy

cypress/locators/text-editor/locators.js

@@ -1,5 +1,4 @@
 // component preview locators
-export const TEXT_EDITOR_COUNTER = '[data-component="text-editor-counter"]';
 export const TEXT_EDITOR_INPUT = '[role="textbox"]';
 export const TEXT_EDITOR_TOOLBAR = '[data-component="text-editor-toolbar"]';
 export const TEXT_EDITOR_CONTAINER = '[data-component="text-editor-container"]';

src/__internal__/character-count/character-count.spec.tsx

@@ -22,9 +22,9 @@ describe("CharacterCount", () => {
       assertStyleMatch(
         {
           textAlign: "left",
-          fontSize: "12px",
-          marginTop: "4px",
-          marginBottom: "4px",
+          fontSize: "var(--fontSizes100)",
+          marginTop: "var(--spacing050)",
+          marginBottom: "var(--spacing050)",
           color: "var(--colorsUtilityYin055)",
         },
         wrapper.find(StyledCharacterCount)
@@ -99,7 +99,7 @@ describe("CharacterCount", () => {
       wrapper.setProps({ isOverLimit: true });
       assertStyleMatch(
         {
-          fontWeight: "700",
+          fontWeight: "var(--fontWeights700)",
           color: "var(--colorsSemanticNegative500)",
         },
         wrapper.find(StyledCharacterCount)

src/__internal__/character-count/character-count.style.ts

@@ -6,14 +6,10 @@ import visuallyHidden from "../../style/utils/visually-hidden";
 const StyledCharacterCountWrapper = styled.div``;
 
 const StyledCharacterCount = styled.div<{ isOverLimit: boolean }>`
-  ::after {
-    content: " ";
-  }
-
   text-align: left;
-  font-size: 12px;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  font-size: var(--fontSizes100);
+  margin-top: var(--spacing050);
+  margin-bottom: var(--spacing050);
   color: ${({ isOverLimit }) =>
     isOverLimit
       ? "var(--colorsSemanticNegative500)"
@@ -22,7 +18,7 @@ const StyledCharacterCount = styled.div<{ isOverLimit: boolean }>`
   ${({ isOverLimit }) =>
     isOverLimit &&
     css`
-      font-weight: 700;
+      font-weight: var(--fontWeights700);
     `}
 `;
 

src/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.component.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import StyledValidationWrapper from "./editor-validation-wrapper.style";
+import ValidationIcon from "../../../../__internal__/validations";
+
+export interface EditorValidationWrapperProps {
+  /** Message to be displayed when there is an error */
+  error?: string;
+  /** Message to be displayed when there is a warning */
+  warning?: string;
+  /** Message to be displayed when there is an info */
+  info?: string;
+}
+
+const ValidationWrapper = ({
+  error,
+  warning,
+  info,
+}: EditorValidationWrapperProps) => (
+  <StyledValidationWrapper data-component="text-editor-validation-wrapper">
+    <ValidationIcon
+      error={error}
+      warning={warning}
+      info={info}
+      tooltipPosition="top"
+      tabIndex={0}
+    />
+  </StyledValidationWrapper>
+);
+
+export default ValidationWrapper;

src/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.spec.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { mount } from "enzyme";
+import { assertStyleMatch } from "../../../../__spec_helper__/test-utils";
+import ValidationWrapper, {
+  EditorValidationWrapperProps,
+} from "./editor-validation-wrapper.component";
+import ValidationIcon from "../../../../__internal__/validations";
+
+const render = (props: EditorValidationWrapperProps = {}, renderer = mount) => {
+  return renderer(<ValidationWrapper {...props} />);
+};
+
+describe("EditorValidationWrapper", () => {
+  it("has the expected styles", () => {
+    const wrapper = render();
+    assertStyleMatch(
+      {
+        margin:
+          "var(--spacing200) var(--spacing200) var(--spacing000) var(--spacing050)",
+        minWidth: "var(--sizing500)",
+        height: "var(--sizing275)",
+        float: "right",
+        alignItems: "center",
+      },
+      wrapper
+    );
+  });
+
+  describe("with validation", () => {
+    it.each([
+      { error: "error" },
+      { warning: "warning" },
+      { info: "info" },
+    ] as const)("renders the icon when a message is provided", (msg) => {
+      expect(
+        render({ ...msg })
+          .find(ValidationIcon)
+          .exists()
+      ).toEqual(true);
+    });
+  });
+});

src/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.style.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const StyledValidationWrapper = styled.div`
+  margin: var(--spacing200) var(--spacing200) var(--spacing000)
+    var(--spacing050);
+  min-width: var(--sizing500);
+  height: var(--sizing275);
+  display: flex;
+  float: right;
+  align-items: center;
+`;
+
+export default StyledValidationWrapper;

src/components/text-editor/__internal__/editor-validation-wrapper/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./editor-validation-wrapper.component";
+export type { EditorValidationWrapperProps } from "./editor-validation-wrapper.component";