@eccenca/gui-elements 25.1.0-rc.1 → 25.1.0-rc.3

package/src/extensions/codemirror/tests/EditorAppearanceConfigMenu.test.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { EditorAppearanceConfigMenu } from "../toolbars/EditorAppearanceConfigMenu";
+
+const contextOverlayClass = `${eccgui}-contextoverlay`;
+
+describe("EditorAppearanceConfigMenu", () => {
+    it("renders menu items for each config property, using key as fallback label", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        expect(await screen.findByText("wrapLines")).toBeVisible();
+        expect(await screen.findByText("preventLineNumbers")).toBeVisible();
+    });
+
+    it("uses configPropertyTranslate for menu item labels", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+        const translate = (key: string) => `Label_${key}` as string | false;
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} setConfig={setConfig} configPropertyTranslate={translate} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        expect(await screen.findByText("Label_wrapLines")).toBeVisible();
+        expect(await screen.findByText("Label_preventLineNumbers")).toBeVisible();
+    });
+
+    it("calls setConfig with the toggled value when a menu item is clicked", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        fireEvent.click(wrapLinesItem);
+
+        expect(setConfig).toHaveBeenCalledWith({ wrapLines: false, preventLineNumbers: false });
+    });
+
+    it("menu trigger is disabled when all config properties are locked", () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true, preventLineNumbers: true };
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        const trigger = container.getElementsByClassName(contextOverlayClass)[0].querySelector("button");
+        expect(trigger).toBeDisabled();
+    });
+
+    it("menu trigger is enabled when not all config properties are locked", () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true }; // only one locked
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        const trigger = container.getElementsByClassName(contextOverlayClass)[0].querySelector("button");
+        expect(trigger).not.toBeDisabled();
+    });
+
+    it("locked config property has a disabled menu item", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true };
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-disabled='true']")).not.toBeNull();
+    });
+
+    it("unlocked config property has an enabled menu item", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const configLocked = { wrapLines: true }; // only wrapLines is locked
+        const setConfig = jest.fn();
+
+        const { container } = render(
+            <EditorAppearanceConfigMenu config={config} configLocked={configLocked} setConfig={setConfig} />
+        );
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-disabled='true']")).toBeNull();
+    });
+
+    it("selected config property is marked as selected in the menu", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const wrapLinesItem = await screen.findByText("wrapLines");
+        expect(wrapLinesItem.closest("[aria-selected='true']")).not.toBeNull();
+    });
+
+    it("unselected config property is not marked as selected in the menu", async () => {
+        const config = { wrapLines: true, preventLineNumbers: false };
+        const setConfig = jest.fn();
+
+        const { container } = render(<EditorAppearanceConfigMenu config={config} setConfig={setConfig} />);
+
+        fireEvent.click(container.getElementsByClassName(contextOverlayClass)[0]);
+
+        const preventLineNumbersItem = await screen.findByText("preventLineNumbers");
+        expect(preventLineNumbersItem.closest("[aria-selected='true']")).toBeNull();
+    });
+});

package/src/extensions/codemirror/toolbars/EditorAppearanceConfigMenu.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import { ContextMenu, ContextMenuProps, MenuItem } from "../../../components";
+
+export interface EditorAppearanceConfigMenuProps {
+    /** Object containing a `true`/`false` value for each property */
+    config: { [s: string]: boolean };
+    /** Object containing `true` for each property that cannot be changed by user */
+    configLocked?: { [s: string]: boolean | undefined };
+    /** Handler that returns a translation for each config property key */
+    configPropertyTranslate?: (key: string) => string | false;
+    /** Handler to update config after user changes */
+    setConfig: React.Dispatch<React.SetStateAction<{ [s: string]: boolean }>>;
+    /** Additional properties used for the included `ContextMenu` */
+    contextMenuProps?: ContextMenuProps;
+}
+
+/**
+ * Returns a simple context menu that provides switches to control the editor appearance.
+ */
+export function EditorAppearanceConfigMenu({
+    config,
+    configLocked = {},
+    configPropertyTranslate = (s) => s,
+    setConfig,
+    contextMenuProps,
+}: EditorAppearanceConfigMenuProps) {
+    return (
+        <ContextMenu
+            togglerElement={"item-settings"}
+            {...contextMenuProps}
+            disabled={
+                contextMenuProps?.disabled ??
+                Object.values(config).length ===
+                    Object.values(configLocked).filter((value) => {
+                        return typeof value !== "undefined";
+                    }).length
+            }
+        >
+            {Object.entries(config).map(([key, value]) => {
+                return (
+                    <MenuItem
+                        key={key}
+                        roleStructure={"listoption"}
+                        selected={value}
+                        text={configPropertyTranslate(key) || key}
+                        disabled={typeof configLocked[key] !== "undefined"}
+                        onClick={() => {
+                            setConfig({
+                                ...config,
+                                [key]: !value,
+                            });
+                        }}
+                    />
+                );
+            })}
+        </ContextMenu>
+    );
+}

package/src/extensions/codemirror/toolbars/markdown.toolbar.tsx

@@ -9,6 +9,7 @@ import { Spacing } from "../../../components/Separation/Spacing";
 import { Toolbar, ToolbarSection } from "../../../components/Toolbar";
 
 import MarkdownCommand from "./commands/markdown.command";
+import { EditorAppearanceConfigMenu } from "./EditorAppearanceConfigMenu";
 
 interface MarkdownToolbarProps {
     view?: EditorView;
@@ -17,6 +18,7 @@ interface MarkdownToolbarProps {
     translate: (key: string) => string | false;
     disabled?: boolean;
     readonly?: boolean;
+    configMenu?: React.ReactElement<typeof EditorAppearanceConfigMenu>;
 }
 
 export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
@@ -25,7 +27,8 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
     showPreview,
     disabled,
     readonly,
-    translate
+    translate,
+    configMenu,
 }) => {
     const commandRef = React.useRef<MarkdownCommand | null>(null);
 
@@ -35,10 +38,10 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
         }
     }, [view]);
 
-    const getTranslation = (fallback: string) : string => {
+    const getTranslation = (fallback: string): string => {
         const key = fallback.toLowerCase().replace(" ", "-");
         return translate(key) || fallback;
-    }
+    };
 
     const { basic, lists, attachments } = MarkdownCommand.commands;
     return (
@@ -112,6 +115,17 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
                     disabled={disabled}
                 />
             </ToolbarSection>
+            {configMenu && (
+                <ToolbarSection>
+                    <Spacing vertical size="small" hasDivider />
+                    {React.cloneElement(configMenu, {
+                        ...{
+                            ...configMenu.props,
+                            contextMenuProps: { disabled: showPreview || disabled ? true : undefined },
+                        },
+                    })}
+                </ToolbarSection>
+            )}
         </Toolbar>
     );
 };

package/src/index.scss

@@ -61,6 +61,7 @@ $prefix-carbon: $prefix;
 
 // == Load basic components styles =============================================
 
+@import "./common/scss/accessibility-defaults";
 @import "./components";
 
 // set more readable variable for prefix