@eccenca/gui-elements 23.3.1 → 23.4.0-rc.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/Pagination/pagination.scss

@@ -6,8 +6,8 @@ $eccgui-color-pagination-text: $eccgui-color-workspace-text !default;
 $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
 
 .#{$prefix}--pagination {
-    background-color: $eccgui-color-pagination-background;
     font-size: $eccgui-size-typo-pagination;
+    background-color: $eccgui-color-pagination-background;
 
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
@@ -29,6 +29,11 @@ span.#{$prefix}--pagination__text {
     }
 }
 
+.#{$prefix}--pagination__button--no-index {
+    // TODO: revalidate if this is still necessary using the latest version of carbon lib
+    color: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
+}
+
 .#{$eccgui}-pagination--hideinfotext {
     .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
         display: none;

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -2,12 +2,19 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Label, { LabelProps } from "../Label/Label";
+import OverflowText from "../Typography/OverflowText";
 
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Force label to get displayed without line breaks.
+     * This works best if you use a simple string as content.
+     * Otherwise you may need to take care yourself about it.
+     */
+    nowrap?: boolean;
     /**
      * Additional label properties, e.g. `tooltip`.
      * It is only used if the `PropertyName` has simple text input.
@@ -15,19 +22,31 @@ export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     labelProps?: LabelProps;
 }
 
-export const PropertyName = ({ className = "", size, children, labelProps, ...otherDtProps }: PropertyNameProps) => {
+export const PropertyName = ({
+    children,
+    className = "",
+    size,
+    nowrap,
+    labelProps,
+    ...otherDtProps
+}: PropertyNameProps) => {
     return (
         <dt
             className={
                 `${eccgui}-propertyvalue__property` +
                 (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
+                (nowrap ? ` ${eccgui}-propertyvalue__property--nowrap` : "") +
                 (className ? " " + className : "")
             }
             {...otherDtProps}
         >
             <div>
                 {typeof children === "string" ? (
-                    <Label text={children} isLayoutForElement="span" {...labelProps} />
+                    <Label
+                        text={nowrap ? <OverflowText inline>{children}</OverflowText> : children}
+                        isLayoutForElement="span"
+                        {...labelProps}
+                    />
                 ) : (
                     children
                 )}

package/src/components/PropertyValuePair/PropertyValue.tsx

@@ -1,14 +1,30 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import OverflowText from "../Typography/OverflowText";
 
-export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {};
+export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Force value to get displayed without line breaks.
+     * This works best if you use a string or inline element as content.
+     * Otherwise you may need to take care yourself about it.
+     */
+    nowrap?: boolean;
+}
 
-export const PropertyValue = ({ className = "", children, ...otherProps }: PropertyValueProps) => {
+export const PropertyValue = ({ children, className = "", nowrap, ...otherDdProps }: PropertyValueProps) => {
     return (
-        <dd className={`${eccgui}-propertyvalue__value` + (className ? " " + className : "")} {...otherProps}>
-            <div>{children}</div>
+        <dd
+            className={
+                `${eccgui}-propertyvalue__value` +
+                (nowrap ? ` ${eccgui}-propertyvalue__value--nowrap` : "") +
+                (className ? " " + className : "")
+            }
+            {...otherDdProps}
+        >
+            <div>{nowrap ? <OverflowText passDown>{children}</OverflowText> : children}</div>
         </dd>
     );
-}
+};
 
 export default PropertyValue;

package/src/components/PropertyValuePair/PropertyValuePair.tsx

@@ -1,6 +1,10 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import PropertyName from "./PropertyName";
+import PropertyValue from "./PropertyValue";
+
 export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Add a bit white space to the bottom of the element.
@@ -10,15 +14,30 @@ export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElem
      * Add a horizontal rule to the bottom of the element.
      */
     hasDivider?: boolean;
-};
+    /**
+     * Forward the `nowrap` option to it `PropertyName` and `PropertyValue` children.
+     */
+    nowrap?: boolean;
+}
 
 export const PropertyValuePair = ({
-    className = "",
     children,
+    className = "",
+    nowrap,
     hasSpacing = false,
     hasDivider = false,
     ...otherProps
 }: PropertyValuePairProps) => {
+    const alteredChildren = nowrap
+        ? React.Children.map(children, (child) => {
+              const originalChild = child as React.ReactElement;
+              if (originalChild.type && (originalChild.type === PropertyName || originalChild.type === PropertyValue)) {
+                  return React.cloneElement(originalChild, { nowrap: true });
+              }
+              return child;
+          })
+        : children;
+
     return (
         <div
             className={
@@ -29,9 +48,9 @@ export const PropertyValuePair = ({
             }
             {...otherProps}
         >
-            {children}
+            {alteredChildren}
         </div>
     );
-}
+};
 
 export default PropertyValuePair;

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -6,7 +6,7 @@
 
 .#{$eccgui}-propertyvalue__pair {
     display: block;
-    max-width: 100%;
+    width: 100%;
     clear: both;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {
@@ -63,6 +63,11 @@
     }
 }
 
+.#{$eccgui}-propertyvalue__property--nowrap {
+    overflow: visible;
+    white-space: nowrap;
+}
+
 .#{$eccgui}-propertyvalue__value {
     box-sizing: content-box;
     margin-left: math.div(3, 16) * 100%;

package/src/components/PropertyValuePair/stories/PropertyName.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { PropertyName } from "../../../index";
+
+export default {
+    title: "Components/PropertyValuePair/Name",
+    component: PropertyName,
+    argTypes: {},
+} as Meta<typeof PropertyName>;
+
+const Template: StoryFn<typeof PropertyName> = (args) => <PropertyName {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
+};

package/src/components/PropertyValuePair/stories/PropertyValue.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { PropertyValue } from "../../../index";
+
+export default {
+    title: "Components/PropertyValuePair/Value",
+    component: PropertyValue,
+    argTypes: {},
+} as Meta<typeof PropertyValue>;
+
+const Template: StoryFn<typeof PropertyValue> = (args) => <PropertyValue {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: loremIpsum({ p: 3, avgSentencesPerParagraph: 5, avgWordsPerSentence: 8, random: false }).toString(),
+};