carbon-react 153.3.1 → 153.5.0

package/esm/__internal__/fieldset/fieldset.component.js

@@ -7,6 +7,7 @@ import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
 import Help from "../../components/help";
 import Typography from "../../components/typography";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import useLocale from "../../hooks/__internal__/useLocale";
 const Fieldset = ({
   legend,
   children,
@@ -32,6 +33,8 @@ const Fieldset = ({
   const marginProps = filterStyledSystemMarginProps(rest);
   const [ref, setRef] = useState(null);
   const [isFocused, setFocus] = useState(false);
+  const locale = useLocale();
+  const optionalLabel = locale.label.optional();
   useEffect(() => {
     if (ref && isRequired) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -90,6 +93,7 @@ const Fieldset = ({
   }), /*#__PURE__*/React.createElement(StyledLegendContent, {
     isRequired: isRequired,
     isOptional: isOptional,
+    optionalLabel: optionalLabel,
     isDisabled: isDisabled
   }, legend, !validationRedesignOptIn && tooltipIcon()))), !validationRedesignOptIn && /*#__PURE__*/React.createElement(Typography, {
     screenReaderOnly: true,

package/esm/__internal__/fieldset/fieldset.style.d.ts

@@ -6,6 +6,7 @@ type StyledLegendContentProps = {
     isRequired?: boolean;
     isOptional?: boolean;
     isDisabled?: boolean;
+    optionalLabel?: string;
 };
 declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
 export type StyledLegendProps = {

package/esm/__internal__/fieldset/fieldset.style.js

@@ -35,10 +35,11 @@ const StyledLegendContent = styled.span`
     `}
 
   ${({
-  isOptional
+  isOptional,
+  optionalLabel
 }) => isOptional && css`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         color: var(--colorsUtilityYin055);
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);

package/esm/__internal__/label/label.component.js

@@ -6,6 +6,7 @@ import ValidationIcon from "../validations/validation-icon.component";
 import StyledIconWrapper from "./icon-wrapper.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 import createGuid from "../../__internal__/utils/helpers/guid";
+import useLocale from "../../hooks/__internal__/useLocale";
 const shouldDisplayValidationIcon = ({
   error,
   warning,
@@ -58,6 +59,8 @@ export const Label = ({
     onMouseLeave: onGroupMouseLeave
   } = useContext(InputGroupContext);
   const guid = useRef(createGuid());
+  const locale = useLocale();
+  const optionalLabel = locale.label.optional();
   const handleMouseEnter = () => {
     if (onMouseEnter) onMouseEnter();
     if (onGroupMouseEnter) onGroupMouseEnter();
@@ -115,7 +118,8 @@ export const Label = ({
     optional: optional,
     pr: pr,
     pl: pl,
-    className: className
+    className: className,
+    optionalLabel: optionalLabel
   }, /*#__PURE__*/React.createElement(StyledLabel, _extends({
     "data-element": "label",
     disabled: disabled,

package/esm/__internal__/label/label.style.d.ts

@@ -20,6 +20,8 @@ export interface StyledLabelContainerProps {
     pl?: 1 | 2;
     /** Label width */
     width?: number;
+    /** Text used for the optional label */
+    optionalLabel?: string;
 }
 export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
 export default StyledLabel;

package/esm/__internal__/label/label.style.js

@@ -54,10 +54,11 @@ export const StyledLabelContainer = styled.div`
     `}
 
   ${({
-  optional
+  optional,
+  optionalLabel
 }) => optional && css`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);
         color: var(--colorsUtilityYin055);

package/esm/components/fieldset/fieldset.component.js

@@ -4,6 +4,7 @@ import tagComponent from "../../__internal__/utils/helpers/tags";
 import { FieldsetStyle, StyledLegend } from "./fieldset.style";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import useLocale from "../../hooks/__internal__/useLocale";
 export const Fieldset = ({
   children,
   legend,
@@ -16,6 +17,8 @@ export const Fieldset = ({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const locale = useLocale();
+  const optionalLabel = locale.label.optional();
   useEffect(() => {
     if (ref && required) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -29,7 +32,8 @@ export const Fieldset = ({
   }, rest, marginProps, tagComponent("fieldset", rest)), legend && /*#__PURE__*/React.createElement(StyledLegend, {
     "data-element": "legend",
     isRequired: required,
-    isOptional: isOptional
+    isOptional: isOptional,
+    optionalLabel: optionalLabel
   }, legend), children);
 };
 Fieldset.displayName = "Fieldset";

package/esm/components/fieldset/fieldset.style.d.ts

@@ -7,6 +7,8 @@ export interface StyledLegendProps {
     isRequired?: boolean;
     /** Flag to configure fields as optional. */
     isOptional?: boolean;
+    /** Text used for the optional label */
+    optionalLabel?: string;
 }
 declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
 export { FieldsetStyle, StyledLegend };

package/esm/components/fieldset/fieldset.style.js

@@ -56,10 +56,11 @@ const StyledLegend = styled.legend`
     `}
 
   ${({
-  isOptional
+  isOptional,
+  optionalLabel
 }) => isOptional && css`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         color: var(--colorsUtilityYin055);
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);

package/esm/components/note/note.component.js

@@ -43,8 +43,7 @@ export const Note = ({
   };
   return /*#__PURE__*/React.createElement(TextEditorContext.Provider, {
     value: {
-      onLinkAdded,
-      readOnly: true
+      onLinkAdded
     }
   }, /*#__PURE__*/React.createElement(StyledNote, _extends({
     width: width

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
 export interface ContentEditorProps {
-    /** The active error message of the editor */
-    error?: string;
     /** A hint string rendered before the editor but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
     /** The namespace of the editor that this content editor belongs to */
@@ -10,8 +8,8 @@ export interface ContentEditorProps {
     previews?: React.JSX.Element[];
     /** The number of rows to render in the editor */
     rows?: number;
-    /** The active warning message of the editor */
-    warning?: string;
+    /** Whether the editor is read-only */
+    readOnly?: boolean;
 }
-declare const ContentEditor: ({ error, inputHint, namespace, previews, rows, warning, }: ContentEditorProps) => React.JSX.Element;
+declare const ContentEditor: React.ForwardRefExoticComponent<ContentEditorProps & React.RefAttributes<HTMLDivElement>>;
 export default ContentEditor;

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js

@@ -3,25 +3,24 @@
  * as per their documentation. It also uses the `LinkPreviewerPlugin` to render link previews.
  */
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import React from "react";
+import React, { forwardRef } from "react";
 import StyledContentEditable from "./content-editor.style";
 import { LinkPreviewerPlugin, useCursorAtEnd } from "..";
-const ContentEditor = ({
-  error,
+const ContentEditor = /*#__PURE__*/forwardRef(({
   inputHint,
   namespace,
   previews = [],
   rows,
-  warning
-}) => {
+  readOnly
+}, ref) => {
   const focusAtEnd = useCursorAtEnd();
   return /*#__PURE__*/React.createElement(StyledContentEditable, {
     "data-role": `${namespace}-content-editable`,
-    error: error,
     namespace: namespace,
     rows: rows,
-    warning: warning
+    readOnly: readOnly
   }, /*#__PURE__*/React.createElement(ContentEditable, {
+    ref: ref,
     "aria-describedby": inputHint && `${namespace}-input-hint`,
     "aria-labelledby": `${namespace}-label`,
     className: `${namespace}-editable`,
@@ -37,9 +36,7 @@ const ContentEditor = ({
     "aria-autocomplete": undefined,
     "aria-readonly": undefined
   }), /*#__PURE__*/React.createElement(LinkPreviewerPlugin, {
-    error: error,
-    previews: previews,
-    warning: warning
+    previews: previews
   }));
-};
+});
 export default ContentEditor;

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.d.ts

@@ -1,6 +1,7 @@
 import { ContentEditorProps } from "./content-editor.component";
 interface StyledContentEditableProps extends ContentEditorProps {
     showBorders?: boolean;
+    readOnly?: boolean;
 }
 declare const StyledContentEditable: import("styled-components").StyledComponent<"div", any, StyledContentEditableProps, never>;
 export default StyledContentEditable;

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.style.js

@@ -3,28 +3,22 @@ const DEFAULT_EDITOR_HEIGHT = 210;
 const FIXED_LINE_HEIGHT = 21;
 const StyledContentEditable = styled.div`
   ${({
-  error,
   namespace,
   rows,
-  warning
+  readOnly
 }) => css`
     .${namespace}-editable {
       min-height: ${rows && rows > 2 ? rows * FIXED_LINE_HEIGHT : DEFAULT_EDITOR_HEIGHT}px;
       background-color: var(--colorsUtilityYang100);
-      border-top: 1px solid var(--colorsUtilityMajor200);
-      border-left: 1px solid var(--colorsUtilityMajor200);
-      border-right: 1px solid var(--colorsUtilityMajor200);
+      ${!readOnly && "border-top: 1px solid var(--colorsUtilityMajor200);"}
+      ${readOnly && `
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);      
+      `}
       margin: 0;
       padding: 2px 8px;
-      border-top-left-radius: var(--borderWidth600);
-      border-top-right-radius: var(--borderWidth600);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-
-      ${(error || warning) && css`
-        border: none;
-      `}
-
+      border-bottom-right-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
       :focus {
         outline: none;
       }

package/esm/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.d.ts

@@ -1,11 +1,5 @@
 import React from "react";
-export interface LinkPreviewerProps {
-    /** The active error message of the editor */
-    error?: string;
-    /** The link previews to render at the foot of the editor */
-    previews?: React.JSX.Element[];
-    /** The active warning message of the editor */
-    warning?: string;
-}
-declare const LinkPreviewer: ({ error, previews, warning, }: LinkPreviewerProps) => React.JSX.Element;
+declare const LinkPreviewer: ({ previews, }: {
+    previews?: React.JSX.Element[] | undefined;
+}) => React.JSX.Element;
 export default LinkPreviewer;

package/esm/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.component.js

@@ -1,18 +1,6 @@
-import React, { useContext } from "react";
-import TextEditorContext from "../../../text-editor.context";
+import React from "react";
 import StyledLinkPreviewer from "./link-previewer.style";
 const LinkPreviewer = ({
-  error,
-  previews = [],
-  warning
-}) => {
-  const {
-    readOnly
-  } = useContext(TextEditorContext);
-  return /*#__PURE__*/React.createElement(StyledLinkPreviewer, {
-    error: error,
-    readOnly: readOnly,
-    warning: warning
-  }, previews);
-};
+  previews = []
+}) => /*#__PURE__*/React.createElement(StyledLinkPreviewer, null, previews);
 export default LinkPreviewer;

package/esm/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.d.ts

@@ -1,6 +1,2 @@
-import { LinkPreviewerProps } from "./link-previewer.component";
-interface StyledLinkPreviewerProps extends LinkPreviewerProps {
-    readOnly?: boolean;
-}
-declare const StyledLinkPreviewer: import("styled-components").StyledComponent<"div", any, StyledLinkPreviewerProps, never>;
+declare const StyledLinkPreviewer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export default StyledLinkPreviewer;

package/esm/components/text-editor/__internal__/plugins/LinkPreviewer/link-previewer.style.js

@@ -1,29 +1,6 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 const StyledLinkPreviewer = styled.div`
-  ${({
-  error,
-  readOnly,
-  warning
-}) => css`
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: var(--colorsUtilityYang100);
-    border-bottom: 1px solid var(--colorsUtilityMajor200);
-    border-left: 1px solid var(--colorsUtilityMajor200);
-    border-right: 1px solid var(--colorsUtilityMajor200);
-    margin: 0;
-    padding: 2px 8px;
-
-    ${(error || warning) && css`
-      border-left: none;
-      border-right: none;
-      border-bottom: none;
-    `}
-
-    ${readOnly && css`
-      border-bottom-left-radius: var(--borderWidth600);
-      border-bottom-right-radius: var(--borderWidth600);
-    `}
-  `}
+  margin: 0;
+  padding: 2px 8px;
 `;
 export default StyledLinkPreviewer;

package/esm/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.d.ts

@@ -3,10 +3,12 @@ import { EditorFormattedValues } from "./buttons/save.component";
 interface ToolbarProps {
     /** The namespace of the editor that this toolbar belongs to */
     namespace: string;
+    /** Determines if the Text Editor has a header */
+    hasHeader?: boolean;
     /** The callback to call when the cancel button is clicked */
     onCancel?: () => void;
     /** The callback to call when the save button is clicked */
     onSave?: (value: EditorFormattedValues) => void;
 }
-declare const Toolbar: ({ namespace, onCancel, onSave }: ToolbarProps) => React.JSX.Element;
+declare const Toolbar: ({ namespace, hasHeader, onCancel, onSave }: ToolbarProps) => React.JSX.Element;
 export default Toolbar;

package/esm/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.js

@@ -10,6 +10,7 @@ import { BoldButton, ItalicButton, ListControls } from "./buttons";
 import SaveButton from "./buttons/save.component";
 const Toolbar = ({
   namespace,
+  hasHeader,
   onCancel,
   onSave
 }) => {
@@ -80,6 +81,7 @@ const Toolbar = ({
   }, [buttons]);
   return /*#__PURE__*/React.createElement(StyledToolbar, {
     role: "toolbar",
+    hasHeader: hasHeader,
     "aria-label": locale.textEditor.toolbarAriaLabel(),
     "data-role": `${namespace}-toolbar`,
     id: `${namespace}-toolbar`,

package/esm/components/text-editor/__internal__/plugins/Toolbar/toolbar.style.d.ts

@@ -4,7 +4,9 @@ interface FormattingButtonProps extends ButtonProps {
     tabIndex?: number;
     isActive?: boolean;
 }
-declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {
+    hasHeader?: boolean | undefined;
+}, never>;
 declare const FormattingButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CommandButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const FormattingButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, FormattingButtonProps, never>;

package/esm/components/text-editor/__internal__/plugins/Toolbar/toolbar.style.js

@@ -4,12 +4,16 @@ const StyledToolbar = styled.div`
   display: flex;
   flex-direction: row;
   gap: 8px;
-  background-color: var(--colorsUtilityMajor025);
-  outline: 1px solid var(--colorsUtilityMajor200);
+  background-color: var(--colorsActionMajorYang100);
   padding: 12px;
-  border-radius: var(--borderRadius100);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: ${({
+  hasHeader
+}) => hasHeader ? "0" : "var(--borderRadius100)"};
+  border-top-right-radius: ${({
+  hasHeader
+}) => hasHeader ? "0" : "var(--borderRadius100)"};
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   justify-content: space-between;
   align-items: center;
   margin-left: 1px;

package/esm/components/text-editor/text-editor.component.d.ts

@@ -8,6 +8,10 @@ export interface TextEditorProps extends MarginProps, TagProps {
     characterLimit?: number;
     /** The message to be shown when the editor is in an error state */
     error?: string;
+    /** Custom footer content to be displayed below the editor */
+    footer?: React.ReactNode;
+    /** Custom header content to be displayed above the editor */
+    header?: React.ReactNode;
     /** A hint string rendered before the editor but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
     /** Whether the content of the editor can be empty */
@@ -39,5 +43,5 @@ export interface TextEditorProps extends MarginProps, TagProps {
     /** The initial value of the editor, as a HTML string, or JSON */
     value?: string | undefined;
 }
-export declare const TextEditor: ({ characterLimit, error, inputHint, isOptional, labelText, namespace, onCancel, onChange, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
+export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onCancel, onChange, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
 export default TextEditor;

package/esm/components/text-editor/text-editor.component.js

@@ -18,7 +18,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import { COMPONENT_PREFIX, markdownNodes, theme } from "./__internal__/constants";
 import { AutoLinkerPlugin, CharacterCounterPlugin, ContentEditor, LinkMonitorPlugin, OnChangePlugin, Placeholder, ToolbarPlugin } from "./__internal__/plugins";
 import TextEditorContext from "./text-editor.context";
-import StyledTextEditor, { StyledEditorToolbarWrapper, StyledTextEditorWrapper, StyledValidationMessage, StyledWrapper } from "./text-editor.style";
+import StyledTextEditor, { StyledEditorToolbarWrapper, StyledHeaderWrapper, StyledFooterWrapper, StyledTextEditorWrapper, StyledValidationMessage, StyledWrapper } from "./text-editor.style";
 import { createEmpty } from "./utils";
 import HintText from "../../__internal__/hint-text";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -26,6 +26,8 @@ import tagComponent from "../../__internal__/utils/helpers/tags";
 export const TextEditor = ({
   characterLimit = 3000,
   error,
+  footer,
+  header,
   inputHint,
   isOptional = false,
   labelText,
@@ -46,7 +48,25 @@ export const TextEditor = ({
   const editorRef = useRef(undefined);
   const locale = useLocale();
   const [characterLimitWarning, setCharacterLimitWarning] = useState(undefined);
+  const hasWarningOrError = Boolean(error || characterLimitWarning || warning);
+  const contentEditorRef = useRef(null);
   const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    const editorElement = contentEditorRef?.current;
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    editorElement?.addEventListener("focus", handleFocus);
+    editorElement?.addEventListener("blur", handleBlur);
+    const cleanup = () => {
+      editorElement?.removeEventListener("focus", handleFocus);
+      editorElement?.removeEventListener("blur", handleBlur);
+    };
+    return cleanup;
+  }, [contentEditorRef]);
   const [cancelTrigger, setCancelTrigger] = useState(false);
   const debounceWaitTime = 500;
   const initialConfig = useMemo(() => {
@@ -110,8 +130,7 @@ export const TextEditor = ({
     "data-role": `${namespace}-editor-wrapper`
   }, filterStyledSystemMarginProps(rest), tagComponent("text-editor", rest)), /*#__PURE__*/React.createElement(TextEditorContext.Provider, {
     value: {
-      onLinkAdded,
-      readOnly
+      onLinkAdded
     }
   }, /*#__PURE__*/React.createElement(Label, {
     isRequired: required,
@@ -135,19 +154,22 @@ export const TextEditor = ({
   }, error || characterLimitWarning || warning), /*#__PURE__*/React.createElement(StyledEditorToolbarWrapper, {
     "data-role": `${namespace}-editor-toolbar-wrapper`,
     id: `${namespace}-editor-toolbar-wrapper`,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
-    focused: isFocused
-  }, /*#__PURE__*/React.createElement(StyledTextEditor, {
+    focused: isFocused,
+    hasWarningOrError: hasWarningOrError
+  }, header && /*#__PURE__*/React.createElement(StyledHeaderWrapper, {
+    "data-role": `${namespace}-header-wrapper`
+  }, header), !readOnly && /*#__PURE__*/React.createElement(ToolbarPlugin, _extends({
+    hasHeader: Boolean(header)
+  }, toolbarProps)), /*#__PURE__*/React.createElement(StyledTextEditor, {
     "data-role": `${namespace}-editor`
   }, /*#__PURE__*/React.createElement(RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(ContentEditor, {
-      error: error,
+      ref: contentEditorRef,
       inputHint: inputHint,
       namespace: namespace,
       previews: previews,
       rows: rows,
-      warning: warning
+      readOnly: readOnly
     }),
     placeholder: /*#__PURE__*/React.createElement(Placeholder, {
       namespace: namespace,
@@ -160,7 +182,9 @@ export const TextEditor = ({
     validateUrl: validateUrl
   }), /*#__PURE__*/React.createElement(ClickableLinkPlugin, {
     newTab: true
-  }), /*#__PURE__*/React.createElement(AutoLinkerPlugin, null)), !readOnly && /*#__PURE__*/React.createElement(ToolbarPlugin, toolbarProps), /*#__PURE__*/React.createElement(LinkMonitorPlugin, null)), characterLimit > 0 && !readOnly && /*#__PURE__*/React.createElement(CharacterCounterPlugin, {
+  }), /*#__PURE__*/React.createElement(AutoLinkerPlugin, null)), footer && /*#__PURE__*/React.createElement(StyledFooterWrapper, {
+    "data-role": `${namespace}-footer-wrapper`
+  }, footer), /*#__PURE__*/React.createElement(LinkMonitorPlugin, null)), characterLimit > 0 && !readOnly && /*#__PURE__*/React.createElement(CharacterCounterPlugin, {
     maxChars: characterLimit,
     namespace: namespace
   })))));

package/esm/components/text-editor/text-editor.context.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 declare const _default: React.Context<{
     onLinkAdded?: ((link: string, state: string) => void) | undefined;
-    readOnly?: boolean | undefined;
 }>;
 export default _default;

package/esm/components/text-editor/text-editor.style.d.ts

@@ -11,10 +11,13 @@ interface StyledValidationMessageProps {
 }
 interface StyledEditorToolbarWrapperProps {
     focused?: boolean;
+    hasWarningOrError?: boolean;
 }
 export declare const StyledTextEditor: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const StyledTextEditorWrapper: import("styled-components").StyledComponent<"div", any, StyledTextEditorWrapperProps, never>;
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, StyledWrapperProps, never>;
 export declare const StyledEditorToolbarWrapper: import("styled-components").StyledComponent<"div", any, StyledEditorToolbarWrapperProps, never>;
+export declare const StyledHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledValidationMessage: import("styled-components").StyledComponent<"div", any, StyledValidationMessageProps, never>;
 export default StyledTextEditor;

package/esm/components/text-editor/text-editor.style.js

@@ -35,24 +35,28 @@ export const StyledWrapper = styled.div`
         .${namespace}-editable, #${namespace}-toolbar {
           outline: none;
         }
-
-        #${namespace}-toolbar {
-          border-top: 1px solid var(--colorsUtilityMajor200);
-        }
       }
     `}
   `};
 `;
 export const StyledEditorToolbarWrapper = styled.div`
   ${({
-  focused
+  focused,
+  hasWarningOrError
 }) => css`
     border-radius: var(--borderRadius100);
-    outline: none;
+    outline: ${hasWarningOrError ? "none" : "1px solid var(--colorsUtilityMajor200)"};
 
     ${focused && addFocusStyling()}
   `}
 `;
+export const StyledHeaderWrapper = styled.div`
+  padding: var(--spacing200);
+`;
+export const StyledFooterWrapper = styled.div`
+  border-top: 1px solid var(--colorsUtilityMajor200);
+  padding: var(--spacing200);
+`;
 export const StyledValidationMessage = styled.div`
   ${({
   error

package/esm/locales/de-de.js

@@ -82,6 +82,9 @@ const deDE = {
   heading: {
     backLinkAriaLabel: () => "Zurück"
   },
+  label: {
+    optional: () => "optional"
+  },
   link: {
     skipLinkLabel: () => "Zum Hauptinhalt springen"
   },
@@ -148,6 +151,24 @@ const deDE = {
   pod: {
     undo: () => "Rückgängig"
   },
+  textEditor: {
+    boldAria: () => "Fett",
+    cancelButton: () => "Abbrechen",
+    cancelButtonAria: () => "Abbrechen",
+    characterCounter(count) {
+      return `Noch ${typeof count === "number" ? count.toString() : count} Zeichen`;
+    },
+    characterLimit(count) {
+      return `Sie sind ${count} Zeichen über dem Zeichenlimit`;
+    },
+    contentEditorAria: () => "Editor für Rich-Text-Inhalte",
+    italicAria: () => "Kursiv",
+    orderedListAria: () => "Sortierte Liste",
+    saveButton: () => "Speichern",
+    saveButtonAria: () => "Speichern",
+    toolbarAriaLabel: () => "Formatierung",
+    unorderedListAria: () => "Unsortierte Liste"
+  },
   search: {
     searchButtonText: () => "Suchen"
   },

package/esm/locales/en-gb.js

@@ -86,6 +86,9 @@ const enGB = {
   heading: {
     backLinkAriaLabel: () => "Back"
   },
+  label: {
+    optional: () => "optional"
+  },
   link: {
     skipLinkLabel: () => "Skip to main content"
   },