@eccenca/gui-elements 23.5.0 → 23.6.0-rc.0

package/src/components/Menu/Menu.tsx

@@ -1,27 +1,16 @@
-import React from 'react';
-import {
-    Menu as BlueprintMenu,
-    MenuProps as BlueprintMenuProps,
-} from "@blueprintjs/core";
+import React from "react";
+import { Menu as BlueprintMenu, MenuProps as BlueprintMenuProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface MenuProps extends BlueprintMenuProps {
-    // we do not add own changes here currently
-}
+export type MenuProps = BlueprintMenuProps;
 
-export const Menu = ({
-    children,
-    className="",
-    ...restProps
-}: MenuProps) => {
+export const Menu = ({ children, className = "", ...restProps }: MenuProps) => {
     return (
-        <BlueprintMenu
-            {...restProps}
-            className={`${eccgui}-menu__list ` + className}
-        >
+        <BlueprintMenu {...restProps} className={`${eccgui}-menu__list ` + className}>
             {children}
         </BlueprintMenu>
     );
-}
+};
 
 export default Menu;

package/src/components/Menu/MenuDivider.tsx

@@ -1,26 +1,16 @@
-import React from 'react';
-import {
-    MenuDivider as BlueprintMenuDivider,
-    MenuDividerProps as BlueprintMenuDividerProps,
-} from "@blueprintjs/core";
+import React from "react";
+import { MenuDivider as BlueprintMenuDivider, MenuDividerProps as BlueprintMenuDividerProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface MenuDividerProps extends BlueprintMenuDividerProps {
-    // we do not add own changes here currently
-}
+export type MenuDividerProps = BlueprintMenuDividerProps;
 
-export const MenuDivider = ({
-    children,
-    className="",
-    ...restProps
-}: MenuDividerProps) => {
+export const MenuDivider = ({ children, className = "", ...restProps }: MenuDividerProps) => {
     return (
-        <BlueprintMenuDivider
-            {...restProps}
-            className={`${eccgui}-menu__divider ` + className}>
+        <BlueprintMenuDivider {...restProps} className={`${eccgui}-menu__divider ` + className}>
             {children}
         </BlueprintMenuDivider>
     );
-}
+};
 
 export default MenuDivider;

package/src/components/Menu/MenuItem.tsx

@@ -1,52 +1,40 @@
-import React from 'react';
-import {
-    MenuItem as BlueprintMenuItem,
-    MenuItemProps as BlueprintMenuItemProps
-} from "@blueprintjs/core";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import Icon from '../Icon/Icon';
-import { TestIconProps } from "./../Icon/TestIcon";
-import { openInNewTab } from '../../common/utils/openInNewTab';
+import React from "react";
+import { MenuItem as BlueprintMenuItem, MenuItemProps as BlueprintMenuItemProps } from "@blueprintjs/core";
+
+import { openInNewTab } from "../../common/utils/openInNewTab";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
+import Icon from "../Icon/Icon";
+
+import { TestIconProps } from "./../Icon/TestIcon";
 
-export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "onFocus" | "target" | "children"> {
+export interface MenuItemProps
+    extends Omit<BlueprintMenuItemProps, "icon" | "children">,
+        Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "onFocus" | "target" | "children"> {
     /*
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
-    children?: React.ReactNode
+    children?: React.ReactNode;
 }
 
 /**
  * Single item, used as child inside `Menu`.
  */
-export const MenuItem = ({
-    children,
-    className = "",
-    icon,
-    onClick,
-    href,
-    ...restProps
-}: MenuItemProps) => {
+export const MenuItem = ({ children, className = "", icon, onClick, href, ...restProps }: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
             href={href}
-            onClick={(e:React.MouseEvent<HTMLElement>) => openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)}
-            className={`${eccgui}-menu__item ` + className}
-            icon={
-                icon ? (
-                    (typeof icon === "string" || Array.isArray(icon)) ? (
-                        <Icon name={icon} />
-                    ) : (
-                        icon
-                    )
-                ) : false
+            onClick={(e: React.MouseEvent<HTMLElement>) =>
+                openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)
             }
+            className={`${eccgui}-menu__item ` + className}
+            icon={icon ? typeof icon === "string" || Array.isArray(icon) ? <Icon name={icon} /> : icon : false}
         >
             {children ?? null}
         </BlueprintMenuItem>
     );
-}
+};
 
 export default MenuItem;

package/src/components/Menu/Stories/Menu.stories.tsx

@@ -1,31 +1,35 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Menu, MenuItem, MenuDivider } from "../../../../index";
-import { Default as MenuItemStory } from '../Stories/MenuItem.stories';
-import { Default as ContentMenuStory } from '../../ContextOverlay/ContextMenu.stories';
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Menu, MenuDivider, MenuItem } from "../../../../index";
+import { Default as ContentMenuStory } from "../../ContextOverlay/ContextMenu.stories";
+import { Default as MenuItemStory } from "../Stories/MenuItem.stories";
 
 export default {
     title: "Components/Menu",
     component: Menu,
-    subcomponents: {MenuItem, MenuDivider},
+    subcomponents: { MenuItem, MenuDivider },
     argTypes: {
         children: {
             control: "none",
         },
-    }
-} as ComponentMeta<typeof Menu>
+    },
+} as Meta<typeof Menu>;
 
-const MenuExample: ComponentStory<typeof Menu> = (args) => (
-    <Menu style={{width: "200px"}} {...args} />
+const MenuExample: StoryFn<typeof Menu> = (args) => (
+    <OverlaysProvider>
+        <Menu style={{ width: "200px" }} {...args} />
+    </OverlaysProvider>
 );
 
-export const Default  = MenuExample.bind({});
+export const Default = MenuExample.bind({});
 Default.args = {
-    children : (
+    children: (
         <>
             {ContentMenuStory.args.children}
-            <MenuDivider title ="Second menu part"/>
-            <MenuItem {...MenuItemStory.args} selected />
+            <MenuDivider title="Second menu part" />
+            <MenuItem {...MenuItemStory.args} active />
         </>
     ),
 };

package/src/components/Menu/Stories/MenuItem.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
+import { Meta, StoryFn } from "@storybook/react";
+
 import { Menu, MenuItem, TestIcon } from "../../../../index";
+
 import canonicalIcons from "./../../Icon/canonicalIconNames";
 
 export default {
@@ -10,30 +13,31 @@ export default {
     argTypes: {
         icon: {
             control: "select",
-            options: [
-            "Test icon",
-                ...(Object.keys(canonicalIcons)),
-            ],
+            options: ["Test icon", ...Object.keys(canonicalIcons)],
             mapping: {
-            "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon"/>,
-                ...(Object.keys(canonicalIcons)),
-            }
+                "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon" />,
+                ...Object.keys(canonicalIcons),
+            },
         },
-    }
-} as ComponentMeta<typeof MenuItem>
+    },
+} as Meta<typeof MenuItem>;
 
-const MenuExample: ComponentStory<typeof MenuItem> = (args) => (
-    <Menu style={{width: "200px"}}><MenuItem {...args} /></Menu>
+const MenuExample: StoryFn<typeof MenuItem> = (args) => (
+    <OverlaysProvider>
+        <Menu style={{ width: "200px" }}>
+            <MenuItem {...args} />
+        </Menu>
+    </OverlaysProvider>
 );
 
-export const Default  = MenuExample.bind({});
+export const Default = MenuExample.bind({});
 Default.args = {
     children: (
         <>
-        <MenuItem key="m6" text={"Sub option 1"} />
-        <MenuItem key="m7" text={"Sub option 2"} />
+            <MenuItem key="m6" text={"Sub option 1"} />
+            <MenuItem key="m7" text={"Sub option 2"} />
         </>
     ),
     text: "Parent option",
-    key: "m4"
+    key: "m4",
 };

package/src/components/Menu/index.ts

@@ -1,3 +1,3 @@
 export * from "./Menu";
-export * from "./MenuDivider"
+export * from "./MenuDivider";
 export * from "./MenuItem";

package/src/components/Menu/menu.scss

@@ -32,11 +32,13 @@ $dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
 // $menu-item-line-height: round($pt-font-size * $menu-item-line-height-factor);
 // $menu-item-line-height-large: round($pt-font-size-large * $menu-item-line-height-factor);
 $menu-min-width: 0 !default;
+
 // $menu-item-padding: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
 // $menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
 // $menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) * 0.5 !default;
 // $menu-item-padding-vertical-large: ($pt-button-height-large - $menu-item-line-height-large) * 0.5 !default;
 $menu-background-color: transparent !default;
+
 // $dark-menu-background-color: $dark-gray4 !default;
 // $menu-item-color-hover: $minimal-button-background-color-hover !default;
 // $menu-item-color-active: $minimal-button-background-color-active !default;
@@ -49,20 +51,25 @@ $menu-background-color: transparent !default;
     padding: 0;
 
     .#{$ns}-popover2-content > & {
-        padding: $eccgui-size-inline-whitespace * 0.5;
         min-width: 10em;
         max-width: 20em;
+        padding: $eccgui-size-inline-whitespace * 0.5;
     }
 }
 
+.#{$ns}-menu-header {
+    margin-right: unset;
+    margin-left: unset;
+}
+
 span.#{$ns}-menu-item-icon:empty {
     display: none;
 }
 
 .#{$prefix}--side-nav--rail {
     .#{$ns}-menu-item {
+        max-width: calc(#{2 * $menu-item-padding} + 20px); // padding + normal icon width
         white-space: nowrap;
-        max-width: calc(#{2*$menu-item-padding} + 20px); // padding + normal icon width
     }
 
     .#{$ns}-text-overflow-ellipsis {

package/src/components/Notification/Notification.stories.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
-import { Notification, HtmlContentBlock, Button, Spacing} from "../../../index";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../.storybook/helpers";
+import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
 
 export default {
     title: "Components/Notification",
@@ -17,9 +18,7 @@ export default {
     },
 } as ComponentMeta<typeof Notification>;
 
-const TemplateFull: ComponentStory<typeof Notification> = (args) => (
-    <Notification {...args} />
-);
+const TemplateFull: ComponentStory<typeof Notification> = (args) => <Notification {...args} />;
 
 export const ExampleWithMessage = TemplateFull.bind({});
 ExampleWithMessage.args = {
@@ -53,6 +52,6 @@ ExampleWithActions.args = {
     actions: [
         <Button text="Something" key="b1" />,
         <Spacing size="tiny" vertical />,
-        <Button text="Important" hasStateDanger key="b2" />
-    ]
+        <Button text="Important" hasStateDanger key="b2" />,
+    ],
 };

package/src/components/Notification/Notification.tsx

@@ -1,16 +1,22 @@
 import React from "react";
 import {
-    Toast as BlueprintToast,
-    ToastProps as BlueprintToastProps,
     Classes as BlueprintClassNames,
+    Toast2 as BlueprintToast,
+    ToastProps as BlueprintToastProps,
 } from "@blueprintjs/core";
+
+import { ClassNames as IntentClassNames } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {ClassNames as IntentClassNames} from "../../common/Intent";
+import { TestableComponent } from "../interfaces";
+
+import { ValidIconName } from "./../Icon/canonicalIconNames";
 import Icon, { IconProps } from "./../Icon/Icon";
 import { TestIconProps } from "./../Icon/TestIcon";
-import { ValidIconName } from "./../Icon/canonicalIconNames";
 
-export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
+export interface NotificationProps
+    extends TestableComponent,
+        Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">,
+        React.HTMLAttributes<HTMLDivElement> {
     /**
      * Extra user action elements
      */
@@ -61,6 +67,11 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
      * Icon used as depiction that is displayed with the notification.
      */
     iconName?: ValidIconName | null;
+    /**
+     * If set then a `div` element is used as wrapper.
+     * It uses the attributes given via this property.
+     */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
 /**
@@ -81,6 +92,9 @@ export const Notification = ({
     iconName = "state-info", // deprecated
     icon,
     timeout,
+    wrapperProps,
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
     ...otherProps
 }: NotificationProps) => {
     let intentLevel: string = IntentClassNames.INFO;
@@ -119,7 +133,7 @@ export const Notification = ({
         children
     );
 
-    return (
+    const notification = (
         <BlueprintToast
             className={
                 `${eccgui}-notification ` +
@@ -132,16 +146,27 @@ export const Notification = ({
             message={content}
             timeout={timeout ? timeout : 0}
             icon={
-                !!notificationIcon ? React.cloneElement(
-                    notificationIcon as JSX.Element,
-                    {
-                        className: (notificationIcon.props.className??"") + ` ${BlueprintClassNames.ICON}`
-                    }
-                ) : undefined
+                notificationIcon
+                    ? React.cloneElement(notificationIcon as JSX.Element, {
+                          className: (notificationIcon.props.className ?? "") + ` ${BlueprintClassNames.ICON}`,
+                      })
+                    : undefined
             }
             {...otherProps}
         />
     );
-}
+
+    return wrapperProps || dataTestId || dataTestid ? (
+        <div
+            className={`${eccgui}-notification__wrapper`}
+            {...(wrapperProps ?? {})}
+            {...{ "data-test-id": dataTestId, "data-testid": dataTestid }}
+        >
+            {notification}
+        </div>
+    ) : (
+        <>{notification}</>
+    );
+};
 
 export default Notification;

package/src/components/Notification/Toast.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import Notification, { NotificationProps } from "./Notification";
 
-export interface ToastProps extends NotificationProps {};
+export type ToastProps = NotificationProps;
 
 // FIXME: we need to check if we still need this component. It does not add a lot to `Notification`.
 

package/src/components/NumericInput/NumericInput.tsx

@@ -1,6 +1,6 @@
-import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
 import { memo } from "react";
+import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
 
 // @deprecated will be remove because beside the special arrow buttons it does not add any special. Could be done also with TextField + correct `type`.
-export const NumericInput = memo(BlueprintNumericInput)
+export const NumericInput = memo(BlueprintNumericInput);
 export default NumericInput;

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,7 +15,7 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
  */
 export const OverviewItemActions = ({
     children,
-    className = '',
+    className = "",
     hiddenInteractions = false,
     ...restProps
 }: OverviewItemActionsProps) => {
@@ -23,13 +24,13 @@ export const OverviewItemActions = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__actions` +
-                (hiddenInteractions ? ` ${eccgui}-overviewitem__actions--hiddeninteractions ` : '') +
-                (!!className ? ` ${className}` : '')
+                (hiddenInteractions ? ` ${eccgui}-overviewitem__actions--hiddeninteractions ` : "") +
+                (className ? ` ${className}` : "")
             }
         >
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemActions;

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import { Depiction } from "./../Depiction/Depiction";
 import Icon from "./../Icon/Icon";
 import TestIcon from "./../Icon/TestIcon";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDivElement> {
     // by default the SVG depictions are displayed light on dark color, this property prevents it
@@ -19,8 +21,8 @@ export const OverviewItemDepiction = ({
         // mimic OverviewItemDepiction "behaviour"
         border: false,
         backgroundColor: keepColors ? undefined : "dark",
-        ratio: "1:1" as "1:1",
-        padding: "medium" as "medium",
+        ratio: "1:1" as const,
+        padding: "medium" as const,
     };
     // only return Depiction element if it is wrapped inside OverviewItemDepiction
     if (typeof children === "object" && !!children && "type" in children && children.type === Depiction) {

package/src/components/OverviewItem/OverviewItemDescription.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface OverviewItemDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type OverviewItemDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const OverviewItemDescription = ({
     children,
@@ -12,7 +13,7 @@ export const OverviewItemDescription = ({
         <div {...otherDivProps} className={`${eccgui}-overviewitem__description ` + className}>
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemDescription;

package/src/components/OverviewItem/OverviewItemLine.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemLineProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -20,9 +21,9 @@ export interface OverviewItemLineProps extends React.HTMLAttributes<HTMLDivEleme
  */
 export const OverviewItemLine = ({
     children,
-    className = '',
-    small=false,
-    large=false,
+    className = "",
+    small = false,
+    large = false,
     ...restProps
 }: OverviewItemLineProps) => {
     return (
@@ -30,14 +31,14 @@ export const OverviewItemLine = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__line ` +
-                (small ? `${eccgui}-overviewitem__line--small ` : '' ) +
-                (large ? `${eccgui}-overviewitem__line--large ` : '' ) +
+                (small ? `${eccgui}-overviewitem__line--small ` : "") +
+                (large ? `${eccgui}-overviewitem__line--large ` : "") +
                 className
             }
         >
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemLine;

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
@@ -27,11 +28,11 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
  */
 export const OverviewItemList = ({
     children,
-    className = '',
+    className = "",
     densityHigh = false,
     hasDivider = false,
     hasSpacing = false,
-    columns=1,
+    columns = 1,
     ...restProps
 }: OverviewItemListProps) => {
     return (
@@ -39,20 +40,18 @@ export const OverviewItemList = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__list ` +
-                (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : '') +
-                (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : '') +
-                (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : '') +
-                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // FIXME: Support numbers > 2
+                (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : "") +
+                (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : "") +
+                (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : "") +
+                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : "") + // FIXME: Support numbers > 2
                 className
             }
         >
-            {
-                React.Children.map(children, (child) => {
-                    return <li>{ child }</li>
-                })
-            }
+            {React.Children.map(children, (child) => {
+                return <li>{child}</li>;
+            })}
         </ol>
-    )
-}
+    );
+};
 
 export default OverviewItemList;

package/src/components/OverviewItem/index.tsx

@@ -1,9 +1,9 @@
-import OverviewItem from './OverviewItem';
-import OverviewItemDepiction from './OverviewItemDepiction';
-import OverviewItemDescription from './OverviewItemDescription';
-import OverviewItemLine from './OverviewItemLine';
-import OverviewItemActions from './OverviewItemActions';
-import OverviewItemList from './OverviewItemList';
+import OverviewItem from "./OverviewItem";
+import OverviewItemActions from "./OverviewItemActions";
+import OverviewItemDepiction from "./OverviewItemDepiction";
+import OverviewItemDescription from "./OverviewItemDescription";
+import OverviewItemLine from "./OverviewItemLine";
+import OverviewItemList from "./OverviewItemList";
 
 export {
     OverviewItem,