@eccenca/gui-elements 23.3.1 → 23.4.0

package/src/components/AutoSuggestion/tests/AutoSuggestionList.test.tsx

@@ -1,126 +1,125 @@
-import React from 'react';
-import '@testing-library/jest-dom'
-import {fireEvent, render, waitFor} from '@testing-library/react'
-import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
-import {AutoSuggestionList, AutoSuggestionListProps} from '../AutoSuggestionList'
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { AutoSuggestionList, AutoSuggestionListProps } from "../AutoSuggestionList";
 
 describe("Dropdown list", () => {
-    let props:AutoSuggestionListProps,  mockOptions
+    let props: AutoSuggestionListProps, mockOptions;
     beforeEach(() => {
-        props  = {
+        props = {
             currentlyFocusedIndex: 0,
             loading: false,
             isOpen: false,
             options: [],
             itemToHighlight: () => {},
-            onItemSelectionChange: () => {}
-        }
+            onItemSelectionChange: () => {},
+        };
 
         mockOptions = [
             {
-                query:"organizations",
+                query: "organizations",
                 from: 0,
                 length: 13,
-                value:"organizations/name"
+                value: "organizations/name",
             },
             {
-                query:"",
+                query: "",
                 from: 13,
-                length:0,
-                value:"/"
-            }
-        ]
-    })
-
+                length: 0,
+                value: "/",
+            },
+        ];
+    });
 
     it("doesn't render when not focused", () => {
-        const {container} = render(<AutoSuggestionList {...props} />)
-        expect(container).toBeEmptyDOMElement()
-    })
+        const { container } = render(<AutoSuggestionList {...props} />);
+        expect(container).toBeEmptyDOMElement();
+    });
 
     it("should be able to display loading state, when fetching suggestions", () => {
         props = {
             ...props,
             loading: true,
-            isOpen: true
-        }
-        const {getByText} = render(<AutoSuggestionList {...props} />)
-        expect(getByText("Fetching suggestions")).toBeTruthy()
-    })
+            isOpen: true,
+        };
+        const { getByText } = render(<AutoSuggestionList {...props} />);
+        expect(getByText("Fetching suggestions")).toBeTruthy();
+    });
 
     it("should render list when suggestions are fetched", () => {
-       props = {
-           ...props,
-           loading: false,
-           isOpen:true,
-           options: mockOptions
-       }
-       const {container} = render(<AutoSuggestionList {...props} />)
-       const dropdownItems =  container.getElementsByTagName("li")
-       expect(container).not.toBeEmptyDOMElement()
-       expect(dropdownItems.length).toBe(2)
-    })
+        props = {
+            ...props,
+            loading: false,
+            isOpen: true,
+            options: mockOptions,
+        };
+        const { container } = render(<AutoSuggestionList {...props} />);
+        const dropdownItems = container.getElementsByTagName("li");
+        expect(container).not.toBeEmptyDOMElement();
+        expect(dropdownItems.length).toBe(2);
+    });
 
     it("should move horizontally for every cursor movement", async () => {
-       const offset = 10
-       props = {
-           ...props,
-           options: mockOptions,
-           loading: false,
-           isOpen: true,
-           registerForHorizontalShift: (callback => callback(offset)),
-       }
-       const {container} = render(<AutoSuggestionList {...props} />)
-       await waitFor(() => {
-           const parentDiv:HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!
-           const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
-           expect(leftOffset).toBe(offset)
-       })
-    })
+        const offset = 10;
+        props = {
+            ...props,
+            options: mockOptions,
+            loading: false,
+            isOpen: true,
+            offsetValues: { x: 10, y: 0 },
+        };
+        const { container } = render(<AutoSuggestionList {...props} />);
+        await waitFor(() => {
+            const parentDiv: HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!;
+            const leftOffset = Number(parentDiv.style.left.replace(/px$/, ""));
+            expect(leftOffset).toBe(offset);
+        });
+    });
 
     it("should have one active item at a time", () => {
         props = {
             ...props,
             loading: false,
-            isOpen:true,
-            options: mockOptions
-        }
-        const {container} = render(<AutoSuggestionList {...props} />)
-        const activeListItems = Array.from(container.querySelectorAll("li .bp4-menu-item.bp4-active"))
-        expect(activeListItems.length).toBe(1)
-    })
+            isOpen: true,
+            options: mockOptions,
+        };
+        const { container } = render(<AutoSuggestionList {...props} />);
+        const activeListItems = Array.from(container.querySelectorAll("li .bp4-menu-item.bp4-active"));
+        expect(activeListItems.length).toBe(1);
+    });
 
-    it("should respond to click on each item and pass the clicked item to autosuggestion", () =>  {
-        const mockOnItemSelection = jest.fn((item) => {})
+    it("should respond to click on each item and pass the clicked item to autosuggestion", () => {
+        const mockOnItemSelection = jest.fn((item) => {});
         props = {
             ...props,
             loading: false,
-            isOpen:true,
+            isOpen: true,
             options: mockOptions,
-            onItemSelectionChange: mockOnItemSelection
-        }
-        const {getByText} =  render(<AutoSuggestionList {...props}/>)
-        const dropdownListItem =  getByText(props.options[0].query).closest(`.${eccgui}-menu__item`);
-        fireEvent.click(dropdownListItem!!)
-        expect(mockOnItemSelection).toHaveBeenCalledTimes(1)
-        expect(mockOnItemSelection).toHaveBeenCalledWith(props.options[0])
-    })
+            onItemSelectionChange: mockOnItemSelection,
+        };
+        const { getByText } = render(<AutoSuggestionList {...props} />);
+        const dropdownListItem = getByText(props.options[0].query).closest(`.${eccgui}-menu__item`);
+        fireEvent.click(dropdownListItem!!);
+        expect(mockOnItemSelection).toHaveBeenCalledTimes(1);
+        expect(mockOnItemSelection).toHaveBeenCalledWith(props.options[0]);
+    });
 
-    it("should call highlight function when list item is mouse hovered",() => {
-        const mockItemToHighlight = jest.fn((item) => {})
+    it("should call highlight function when list item is mouse hovered", () => {
+        const mockItemToHighlight = jest.fn((item) => {});
         props = {
             ...props,
             loading: false,
-            isOpen:true,
+            isOpen: true,
             options: mockOptions,
-            itemToHighlight: mockItemToHighlight
-        }
-        const {container} =  render(<AutoSuggestionList {...props}/>)
-        const firstItem =  container.querySelector("li");
-        fireEvent.mouseEnter(firstItem!!)
-        expect(mockItemToHighlight).toHaveBeenCalledWith(props.options[0])
-        expect(mockItemToHighlight).toHaveBeenCalledTimes(1)
-        fireEvent.mouseLeave(firstItem!!)
-        expect(mockItemToHighlight).toHaveBeenCalledTimes(1)
-    })
-})
+            itemToHighlight: mockItemToHighlight,
+        };
+        const { container } = render(<AutoSuggestionList {...props} />);
+        const firstItem = container.querySelector("li");
+        fireEvent.mouseEnter(firstItem!!);
+        expect(mockItemToHighlight).toHaveBeenCalledWith(props.options[0]);
+        expect(mockItemToHighlight).toHaveBeenCalledTimes(1);
+        fireEvent.mouseLeave(firstItem!!);
+        expect(mockItemToHighlight).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/AutoSuggestion/tests/{SingleLineCodeEditor.test.tsx → ExtendedCodeEditor.test.tsx}

@@ -1,12 +1,12 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
-import { SingleLineCodeEditor, SingleLineCodeEditorProps } from "../../../../index";
+import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "../../../../index";
 import CodeMirror from "codemirror";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {
-    let props: SingleLineCodeEditorProps,
+    let props: ExtendedCodeEditorProps,
         codeMirrorEditorInstance: CodeMirror.Editor = null as any;
 
     beforeAll(() => {
@@ -40,12 +40,12 @@ describe("SingleLineCodeEditor", () => {
     });
 
     it("should render properly", () => {
-        const { container } = render(<SingleLineCodeEditor {...props} />);
+        const { container } = render(<ExtendedCodeEditor {...props} />);
         expect(container.querySelector(`.${eccgui}-singlelinecodeeditor`)).not.toBeNull();
     });
 
     it("should set the editorInstance immediately it's mounted", () => {
-        render(<SingleLineCodeEditor {...props} />);
+        render(<ExtendedCodeEditor {...props} />);
         expect(props.setEditorInstance).toHaveBeenCalledTimes(1);
         expect(codeMirrorEditorInstance).not.toBeNull();
     });
@@ -55,19 +55,19 @@ describe("SingleLineCodeEditor", () => {
             ...props,
             initialValue: "This is the initial input",
         };
-        const { getByText } = render(<SingleLineCodeEditor {...props} />);
+        const { getByText } = render(<ExtendedCodeEditor {...props} />);
         expect(codeMirrorEditorInstance.getValue()).toBe(props.initialValue);
         expect(getByText(props.initialValue)).toBeTruthy();
     });
 
     it("should not allow user to create new lines", () => {
-        render(<SingleLineCodeEditor {...props} />);
+        render(<ExtendedCodeEditor {...props} />);
         codeMirrorEditorInstance.getDoc().setValue("I'm entering a new line \n character");
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
 
     it("should convert multiple lines to a single line", () => {
-        render(<SingleLineCodeEditor {...{ ...props, initialValue: "1\n2\n3" }} />);
+        render(<ExtendedCodeEditor {...{ ...props, initialValue: "1\n2\n3" }} />);
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
 });

package/src/components/Card/CardHeader.tsx

@@ -1,43 +1,41 @@
 import React from "react";
-import OverviewItem, { OverviewItemProps } from "./../OverviewItem/OverviewItem";
-import { OverviewItemDescription } from "./../OverviewItem";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import CardTitle from "./CardTitle";
+
+import { OverviewItemDescription } from "./../OverviewItem";
+import OverviewItem, { OverviewItemProps } from "./../OverviewItem/OverviewItem";
 import CardOptions from "./CardOptions";
+import CardTitle from "./CardTitle";
 
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
     /**
-     * @deprecated
+     * @deprecated use `whitespaceAmount` option of `<Card />`
      */
     densityHigh?: OverviewItemProps["densityHigh"];
     /**
-     * @deprecated
+     * @deprecated use `whitespaceAmount` option of `<Card />`
      */
     hasSpacing?: OverviewItemProps["hasSpacing"];
 }
 
-export const CardHeader = ({
-    children,
-    className = "",
-    densityHigh = true,
-    ...otherProps
-}: CardHeaderProps) => {
-    let actions: any[] = [];
-    let description: any[] = [];
+export const CardHeader = ({ children, className = "", densityHigh = true, ...otherProps }: CardHeaderProps) => {
+    const actions: any[] = [];
+    const description: any[] = [];
 
-    children && (Array.isArray(children) ? children : [children]).forEach((child) => {
-        if (typeof child === "object" && child && !!child.type) {
-            switch (child.type) {
-                case CardTitle:
-                    description.push(child);
-                    break;
-                case CardOptions:
-                    actions.push(child);
-                    break;
+    children &&
+        (Array.isArray(children) ? children : [children]).forEach((child) => {
+            if (typeof child === "object" && child && !!child.type) {
+                switch (child.type) {
+                    case CardTitle:
+                        description.push(child);
+                        break;
+                    case CardOptions:
+                        actions.push(child);
+                        break;
+                }
             }
-        }
-    });
+        });
 
     return (
         <header>
@@ -47,6 +45,6 @@ export const CardHeader = ({
             </OverviewItem>
         </header>
     );
-}
+};
 
 export default CardHeader;

package/src/components/Grid/GridColumn.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 // import PropTypes from 'prop-types';
 import { Column as CarbonColumn, ColumnDefaultProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
@@ -8,24 +9,25 @@ export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg"
      * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
      * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.
      */
-    small?: boolean
+    small?: boolean;
     /**
      * Column width is medium, using 5 (or 3, on medium viewports) parts out of 16.
      * This boolean property is basically a quick switch for setting `{ md:3, lg:5 }`.
      */
-    medium?: boolean
+    medium?: boolean;
     /**
      * Alignment of column content.
      */
-    verticalAlign?: "top" | "center"
+    verticalAlign?: "top" | "center";
     /**
      * Overwrite column sizes by using the original size config of the Carbon grid column.
      */
-    carbonSizeConfig?: Pick<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm">
+    carbonSizeConfig?: Pick<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm">;
     /**
      * @deprecated
+     * Grid column always uses full width if it is the only column and does not have any othe size config.
      */
-    full?: boolean
+    full?: boolean;
 }
 
 /**
@@ -34,7 +36,7 @@ export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg"
  */
 export const GridColumn = ({
     children,
-    className = '',
+    className = "",
     small = false,
     medium = false,
     full,
@@ -43,8 +45,8 @@ export const GridColumn = ({
     ...otherProps
 }: GridColumnProps) => {
     let sizeConfig = {};
-    if (small) sizeConfig = { md:2, lg:3 };
-    if (medium) sizeConfig = { md:3, lg:5 };
+    if (small) sizeConfig = { md: 2, lg: 3 };
+    if (medium) sizeConfig = { md: 3, lg: 5 };
     return (
         <CarbonColumn
             {...sizeConfig}
@@ -52,13 +54,13 @@ export const GridColumn = ({
             {...otherProps}
             className={
                 `${eccgui}-grid__column` +
-                (verticalAlign ? ` ${eccgui}-grid__column--vertical-` + verticalAlign : '') +
-                (className ? ' '+className : '')
+                (verticalAlign ? ` ${eccgui}-grid__column--vertical-` + verticalAlign : "") +
+                (className ? " " + className : "")
             }
         >
-            { children }
+            {children}
         </CarbonColumn>
-    )
-}
+    );
+};
 
 export default GridColumn;

package/src/components/Icon/TestIcon.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import BaseIcon, { BaseIconProps } from "./BaseIcon";
-import { CarbonIconType } from "./canonicalIconNames"
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import BaseIcon, { BaseIconProps } from "./BaseIcon";
+import { CarbonIconType } from "./canonicalIconNames";
+
 export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
     /**
      * Carbon icon that is used instead of the via `name` defined canonical named icon.
@@ -16,24 +18,18 @@ export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
  * Example usage:
  * ```
  * import { LogoReact } from "@carbon/icons-react";
- * const testIcon = <TestIcon tryout={LogoReact} />
+ * import { TestIcon } from "@eccenca/gui-elements";
+ * const testIcon = <TestIcon tryout={LogoReact} />;
  * ```
  */
-export const TestIcon = ({
-    className = "",
-    tryout,
-    ...otherBaseIconProps
-}: TestIconProps) => {
+export const TestIcon = ({ className = "", tryout, ...otherBaseIconProps }: TestIconProps) => {
     return (
         <BaseIcon
             iconComponent={tryout}
-            className={
-                `${eccgui}-icon--test` +
-                (className ? ` ${className}` : "")
-            }
+            className={`${eccgui}-icon--test` + (className ? ` ${className}` : "")}
             {...otherBaseIconProps}
         />
     );
-}
+};
 
 export default TestIcon;

package/src/components/Icon/canonicalIconNames.tsx

@@ -45,6 +45,11 @@ export type ValidIconName =
     | "artefact-workflow"
     | "data-sourcepath"
     | "data-targetpath"
+    | "data-string"
+    | "data-date"
+    | "data-time"
+    | "data-datetime"
+    | "data-number"
     | "entity-human"
     | "entity-robot"
     | "item-add-artefact"
@@ -201,6 +206,11 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
 
     "data-sourcepath": icons.Data_2,
     "data-targetpath": icons.Data_1,
+    "data-string": icons.StringText,
+    "data-date": icons.Calendar,
+    "data-time": icons.Time,
+    "data-datetime": icons.EventSchedule,
+    "data-number": icons.StringInteger,
 
     "entity-human": icons.User,
     "entity-robot": icons.Bot,

package/src/components/Icon/stories/Icon.stories.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
-import {
-    Icon,
-    Button,
-} from "../../../index";
-import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
 import { Definitions } from "../../../common/Intent";
+import { Button, Icon } from "../../../index";
+
+import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
 
 export default {
     title: "Components/Icon",
@@ -14,25 +12,23 @@ export default {
     argTypes: {
         name: {
             control: "select",
-            options: [...(Object.keys(canonicalIcons))],
+            options: [...Object.keys(canonicalIcons)],
         },
         intent: {
             control: "select",
-            options: {...Definitions},
+            options: { ...Definitions },
         },
     },
-} as ComponentMeta<typeof Icon>;
+} as Meta<typeof Icon>;
 
-const Template: ComponentStory<typeof Icon> = (args) => (
-    <Icon {...args} tooltipText={args.name?.toString()}/>
-);
+const Template: StoryFn<typeof Icon> = (args) => <Icon {...args} tooltipText={args.name?.toString()} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    name: "undefined"
-}
+    name: "undefined",
+};
 
-const TemplateSizes: ComponentStory<typeof Icon> = (args) => (
+const TemplateSizes: StoryFn<typeof Icon> = (args) => (
     <>
         <Icon {...args} small />
         <Icon {...args} />
@@ -42,24 +38,15 @@ const TemplateSizes: ComponentStory<typeof Icon> = (args) => (
 
 export const IconSizes = TemplateSizes.bind({});
 IconSizes.args = {
-    name: "undefined"
-}
+    name: "undefined",
+};
 
 export const IconsOverview = () => {
     return (
         <>
-            {
-                Object.keys(canonicalIcons).map((iconName) => {
-                    return (
-                        <Button
-                            icon={iconName as ValidIconName}
-                            outlined
-                            large
-                            tooltip={iconName}
-                        />
-                    )
-                })
-            }
+            {Object.keys(canonicalIcons).map((iconName) => {
+                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} />;
+            })}
         </>
     );
-}
+};

package/src/components/Icon/stories/TestIcon.stories.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LogoReact } from "@carbon/icons-react";
-import { TestIcon } from "../../../index";
+import { Meta, StoryFn } from "@storybook/react";
+
 import { Definitions } from "../../../common/Intent";
+import { TestIcon } from "../../../index";
 
 export default {
-    title: "Components/Icon",
+    title: "Components/Icon/TestIcon",
     component: TestIcon,
     argTypes: {
         tryout: {
@@ -13,16 +14,14 @@ export default {
         },
         intent: {
             control: "select",
-            options: {...Definitions},
+            options: { ...Definitions },
         },
     },
-} as ComponentMeta<typeof TestIcon>;
+} as Meta<typeof TestIcon>;
 
-const Template: ComponentStory<typeof TestIcon> = (args) => (
-    <TestIcon {...args} />
-);
+const Template: StoryFn<typeof TestIcon> = (args) => <TestIcon {...args} />;
 
 export const TestingAnIcon = Template.bind({});
 TestingAnIcon.args = {
     tryout: LogoReact,
-}
+};