@eccenca/gui-elements 24.1.0-rc.4 → 24.1.0-rc.6

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -27,7 +27,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements used as depiction, text and interactive elements of an overview-item.",
         },
     },
@@ -47,6 +47,9 @@ ItemExample.args = {
         <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions key="hiddenactions" />,
         <OverviewItemActions children={ActionsExample.args.children[1]} key="actions" />,
     ],
+    densityHigh: false,
+    hasSpacing: false,
+    hasCardWrapper: false,
 };
 
 export const ItemWithDepictionElement = Template.bind({});
@@ -69,16 +72,7 @@ ItemWithDepictionElement.args = {
         <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions />,
         <OverviewItemActions children={ActionsExample.args.children[1]} />,
     ],
-};
-
-const TemplateCard: StoryFn<typeof OverviewItem> = (args) => (
-    <Card isOnlyLayout>
-        <OverviewItem {...args}></OverviewItem>
-    </Card>
-);
-
-export const ItemInCard = TemplateCard.bind({});
-ItemInCard.args = {
-    ...ItemExample.args,
+    densityHigh: false,
     hasSpacing: true,
+    hasCardWrapper: true,
 };

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";
@@ -30,7 +31,7 @@ Default.args = {
             return { label: item };
         }),
     itemRenderer: (item, props) => {
-        return <MenuItem text={item.label} title={item.label} />;
+        return <MenuItem text={item.label} title={item.label} {...props} />;
     },
     fill: true,
 };
@@ -53,6 +54,7 @@ ControlledTarget.args = {
     ...Default.args,
     fill: false,
     children: <Button text="Controlled select target" intent="primary" />,
+    onActiveItemChange: fn(),
 };
 
 /**
@@ -70,4 +72,5 @@ ClearanceOption.args = {
     onClearanceHandler: () => {
         alert("Reset now.");
     },
+    onActiveItemChange: fn(),
 };

package/src/components/TextField/SearchField.tsx

@@ -35,10 +35,38 @@ export const SearchField = ({
     className = "",
     emptySearchInputMessage = "Enter search term",
     onClearanceHandler,
-    onClearanceText = "Clear input",
+    onClearanceText = "Clear current search term",
+    onChange,
     leftIcon = <Icon name="operation-search" />,
+    rightElement,
     ...otherProps
 }: SearchFieldProps) => {
+    const [value, setValue] = React.useState<string>("");
+
+    const clearanceButton =
+        onClearanceHandler && value ? (
+            <IconButton
+                data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
+                name="operation-clear"
+                text={onClearanceText}
+                onClick={() => {
+                    setValue("");
+                    onClearanceHandler();
+                }}
+            />
+        ) : undefined;
+
+    const changeHandlerProcess = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+
+    React.useEffect(() => {
+        setValue(otherProps.value ?? otherProps.defaultValue ?? "");
+    }, [otherProps.value, otherProps.defaultValue]);
+
     return (
         <TextField
             className={
@@ -50,16 +78,16 @@ export const SearchField = ({
             placeholder={emptySearchInputMessage}
             aria-label={emptySearchInputMessage}
             rightElement={
-                onClearanceHandler && otherProps.value ? (
-                    <IconButton
-                        data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
-                        name="operation-clear"
-                        text={onClearanceText ? onClearanceText : "Clear current search term"}
-                        onClick={onClearanceHandler}
-                    />
-                ) : undefined
+                (clearanceButton || rightElement) && (
+                    <>
+                        {rightElement}
+                        {clearanceButton}
+                    </>
+                )
             }
+            onChange={changeHandlerProcess}
             {...otherProps}
+            value={value}
             type={"search"}
             leftIcon={leftIcon}
             round={true}

package/src/components/TextField/stories/SearchField.stories.tsx

@@ -1,12 +1,20 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
 import SearchField from "./../SearchField";
 
 export default {
     title: "Components/SearchField",
     component: SearchField,
     argTypes: {
+        leftIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
+        rightElement: {
+            ...helpersArgTypes.exampleIcon,
+        },
         hasStatePrimary: { table: { disable: true } },
         hasStateSuccess: { table: { disable: true } },
         hasStateWarning: { table: { disable: true } },
@@ -23,7 +31,7 @@ Default.args = {
     onClearanceText: "",
 };
 
-export const SearchFieldWithClearanceIcon: StoryFn<typeof SearchField> = (args) => {
+const SearchFieldWithClearanceIconTemplate: StoryFn<typeof SearchField> = (args) => {
     const [query, setQuery] = React.useState<string>("");
     return (
         <SearchField
@@ -34,3 +42,9 @@ export const SearchFieldWithClearanceIcon: StoryFn<typeof SearchField> = (args)
         />
     );
 };
+
+export const SearchFieldWithClearanceIcon = SearchFieldWithClearanceIconTemplate.bind({});
+SearchFieldWithClearanceIcon.args = {
+    onClearanceHandler: null,
+    onClearanceText: "Clear field",
+};

package/src/components/TextField/textfield.scss

@@ -4,7 +4,8 @@
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
-$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio * $eccgui-size-type-levelratio !default;
+$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
+    $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
@@ -50,10 +51,23 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
         height: 100%;
         max-height: $input-button-height-large;
 
-        & > .#{eccgui}-icon {
+        & > * {
+            vertical-align: middle;
+        }
+
+        & > .#{eccgui}-icon,
+        & > .#{eccgui}-tooltip__wrapper {
             display: inline-flex;
+            align-items: center;
             height: 100%;
-            margin: 0 0.5 * $eccgui-size-block-whitespace;
+
+            &:first-child {
+                margin-left: 0.5 * $eccgui-size-block-whitespace;
+            }
+
+            &:last-child {
+                margin-right: 0.5 * $eccgui-size-block-whitespace;
+            }
         }
     }
 }

package/src/components/Typography/OverflowText.tsx

@@ -1,13 +1,34 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../../components/interfaces";
 
-export interface OverflowTextProps {
-    ellipsis?: "reverse" | "none";
+export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * How is ellipsis used to cut text overflows.
+     * Use `reverse`to use the ellipis on text start and display the end of the text.
+     */
+    ellipsis?: "add" | "reverse" | "none";
+    /**
+     * Display component as inline element.
+     */
     inline?: boolean;
+    /**
+     * Using text overflow on all children elements.
+     */
     passDown?: boolean;
+    /**
+     * Additional CSS class name.
+     */
     className?: string;
+    /**
+     * HTML element that is used for the component.
+     */
     useHtmlElement?: "p" | "div" | "span";
+    /**
+     * Used for all other necessary properties.
+     * @deprecated (v25) we will allow only basic HTML element properties and testing IDs
+     */
     [key: string]: any;
 }
 
@@ -15,7 +36,7 @@ export interface OverflowTextProps {
 export const OverflowText = ({
     className = "",
     children,
-    ellipsis,
+    ellipsis = "add",
     inline = false,
     passDown = false,
     useHtmlElement,

package/src/components/Typography/stories/OverflowText.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { OverflowText } from "../../../index";
+
+const config = {
+    title: "Components/Typography/OverflowText",
+    component: OverflowText,
+    argTypes: {
+        children: {
+            control: "select",
+            options: ["simple text", "2 paragraphs"],
+            mapping: {
+                "simple text": loremIpsum({
+                    p: 1,
+                    avgSentencesPerParagraph: 4,
+                    random: false,
+                }),
+                "2 paragraphs": <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            },
+            description: "Content of the element.",
+        },
+    },
+} as Meta<typeof OverflowText>;
+export default config;
+
+const Template: StoryFn<typeof OverflowText> = (args) => <OverflowText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: config?.argTypes?.children?.mapping ? config.argTypes.children.mapping["simple text"] : "Overflow text",
+};

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -19,13 +19,17 @@ export default {
     },
 } as Meta<typeof CodeEditor>;
 
-const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} key={++forcedUpdateKey} />;
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {
     name: "codeinput",
     mode: "markdown",
     defaultValue: "**test me**",
+    useToolbar: true,
+    disabled: false,
+    readOnly: true,
 };
 
 export const LinterExample = TemplateFull.bind({});
@@ -36,19 +40,3 @@ LinterExample.args = {
     useLinting: true,
     autoFocus: true,
 };
-
-export const DisabledExample = TemplateFull.bind({});
-DisabledExample.args = {
-    name: "codeinput",
-    defaultValue: "**test me**",
-    mode: "javascript",
-    disabled: true,
-};
-
-export const IntentExample = TemplateFull.bind({});
-IntentExample.args = {
-    name: "codeinput",
-    defaultValue: "**test me**",
-    mode: "javascript",
-    intent: "warning",
-};

package/src/extensions/codemirror/CodeMirror.tsx

@@ -8,6 +8,8 @@ import { minimalSetup } from "codemirror";
 import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
 import { TestableComponent } from "../../components/interfaces";
+import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
+import { Markdown } from "../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -27,8 +29,8 @@ import {
     adaptedHighlightActiveLine,
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
-    adaptedPlaceholder,
     adaptedLintGutter,
+    adaptedPlaceholder,
 } from "./tests/codemirrorTestHelper";
 import { ExtensionCreator } from "./types";
 
@@ -77,7 +79,6 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Syntax mode of the code editor.
      */
-
     mode?: SupportedCodeEditorModes;
     /**
      * Default value used first when the editor is instanciated.
@@ -156,6 +157,15 @@ export interface CodeEditorProps extends TestableComponent {
      * Disables the editor.
      */
     disabled?: boolean;
+    /**
+     * Add toolbar for mode.
+     * Currently only `markdown` is supported.
+     */
+    useToolbar?: boolean;
+    /**
+     * Get the translation for a specific key
+     */
+    translate?: (key: string) => string | false;
 }
 
 const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
@@ -168,6 +178,8 @@ const ModeLinterMap: ReadonlyMap<SupportedCodeEditorModes, ReadonlyArray<Extensi
     ["javascript", [jsLinter]],
 ]);
 
+const ModeToolbarSupport: ReadonlyArray<SupportedCodeEditorModes> = ["markdown"];
+
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
@@ -203,9 +215,13 @@ export const CodeEditor = ({
     autoFocus = false,
     disabled = false,
     intent,
+    useToolbar,
+    translate,
     ...otherCodeEditorProps
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
+    const [view, setView] = React.useState<EditorView | undefined>();
+    const [showPreview, setShowPreview] = React.useState<boolean>(false);
 
     const linters = useMemo(() => {
         if (!mode) {
@@ -241,6 +257,14 @@ export const CodeEditor = ({
         }
     };
 
+    const getTranslation = (key: string): string | false => {
+        if (translate && typeof translate === "function") {
+            return translate(key);
+        }
+
+        return false;
+    };
+
     React.useEffect(() => {
         const tabIndent =
             !!(tabIntentStyle === "tab" && mode && !(tabForceSpaceForModes ?? []).includes(mode)) || enableTab;
@@ -273,15 +297,16 @@ export const CodeEditor = ({
             EditorView?.updateListener.of((v: ViewUpdate) => {
                 if (disabled) return;
 
-                if (onChange) {
+                if (onChange && v.docChanged) {
+                    // Only fire if the text has actually been changed
                     onChange(v.state.doc.toString());
                 }
 
                 if (onSelection)
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
-                if (onFocusChange) {
-                    v.view.dom.className += ` ${eccgui}-intent--${intent}`;
+                if (onFocusChange && intent && !v.view.dom.classList?.contains(`${eccgui}-intent--${intent}`)) {
+                    v.view.dom.classList.add(`${eccgui}-intent--${intent}`);
                 }
 
                 if (onCursorChange) {
@@ -319,6 +344,7 @@ export const CodeEditor = ({
             }),
             parent: parent.current,
         });
+        setView(view);
 
         if (view?.dom) {
             if (height) {
@@ -346,9 +372,39 @@ export const CodeEditor = ({
             view.destroy();
             if (setEditorView) {
                 setEditorView(undefined);
+                setView(undefined);
             }
         };
-    }, [parent.current, mode, preventLineNumbers]);
+    }, [parent.current, mode, preventLineNumbers, wrapLines]);
+
+    const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
+
+    const editorToolbar = (mode?: SupportedCodeEditorModes): JSX.Element => {
+        switch (mode) {
+            case "markdown":
+                return (
+                    <div>
+                        <div className={`${eccgui}-codeeditor__toolbar`}>
+                            <MarkdownToolbar
+                                view={view}
+                                togglePreviewStatus={() => setShowPreview((p) => !p)}
+                                showPreview={showPreview}
+                                translate={getTranslation}
+                                disabled={disabled}
+                                readonly={readOnly}
+                            />
+                        </div>
+                        {showPreview && (
+                            <div className={`${eccgui}-codeeditor__preview`}>
+                                <Markdown>{view?.state.doc.toString() ?? ""}</Markdown>
+                            </div>
+                        )}
+                    </div>
+                );
+            default:
+                return <></>;
+        }
+    };
 
     return (
         <div
@@ -360,10 +416,13 @@ export const CodeEditor = ({
             data-test-id={dataTestId ? dataTestId : "codemirror-wrapper"}
             className={
                 `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
-                (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "")
+                (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "") +
+                (hasToolbarSupport ? ` ${eccgui}-codeeditor--has-toolbar` : "")
             }
             {...otherCodeEditorProps}
-        />
+        >
+            {hasToolbarSupport && editorToolbar(mode)}
+        </div>
     );
 };
 

package/src/extensions/codemirror/_codemirror.scss

@@ -2,6 +2,9 @@
 
 // own vars
 $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default;
+$eccgui-color-codeeditor-separation: $eccgui-color-separation-divider !default;
+$eccgui-size-codeeditor-height: 20rem !default;
+$eccgui-size-codeeditor-toolbar-height: $button-height !default;
 
 // adjustments
 // stylelint-disable selector-class-pattern
@@ -14,9 +17,39 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         width: 100%;
     }
 
+    &__toolbar {
+        position: absolute;
+        z-index: 3;
+        left: 1px;
+        right: 1px;
+        top: 1px;
+        border-radius: $pt-border-radius $pt-border-radius 0 0;
+        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        background-color: $eccgui-color-codeeditor-background;
+    }
+
+    &--has-toolbar {
+        .cm-scroller {
+            margin-top: $eccgui-size-codeeditor-toolbar-height !important;
+        }
+    }
+
+    &__preview {
+        position: absolute;
+        top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        z-index: 2;
+        padding: $button-padding;
+        overflow-y: auto;
+        background-color: $eccgui-color-codeeditor-background;
+        border-radius: 0 0 $pt-border-radius $pt-border-radius;
+    }
+
     .cm-editor {
         width: 100%;
-        height: 290px;
+        height: $eccgui-size-codeeditor-height;
         clip-path: unset !important; // we may check later why they set inset(0) now
         background-color: $eccgui-color-codeeditor-background;
         border-radius: $pt-border-radius;
@@ -27,7 +60,7 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         &.#{eccgui}-disabled {
             @extend .#{$ns}-input, .#{$ns}-disabled;
 
-            height: 290px;
+            height: $eccgui-size-codeeditor-height;
             padding: 0;
         }