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

package/src/components/Badge/Badge.stories.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LogoReact } from "@carbon/icons-react";
-import { Badge, Icon, TestIcon } from "../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../.storybook/helpers";
+import { Badge, Icon, TestIcon } from "../../../index";
 
 export default {
     title: "Components/Badge",
@@ -12,8 +13,8 @@ export default {
             control: "select",
             options: ["Number", "Text", "Named icon", "Test icon"],
             mapping: {
-                "Number": 123123,
-                "Text": "Label text",
+                Number: 123123,
+                Text: "Label text",
                 "Named icon": <Icon name="item-viewdetails" />,
                 "Test icon": <TestIcon tryout={LogoReact} />,
             },
@@ -25,16 +26,14 @@ export default {
 } as ComponentMeta<typeof Badge>;
 
 const TemplateFull: ComponentStory<typeof Badge> = (args) => (
-    <div style={{position: "relative", border: "solid 1px", width: "10rem"}}>
-        Element area
-        {" "}
-        <Badge {...args} />
+    <div style={{ position: "relative", border: "solid 1px", width: "10rem" }}>
+        Element area <Badge {...args} />
     </div>
 );
 
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
-    children: "123"
+    children: "123",
 };
 
 export const WithTitletip = TemplateFull.bind({});
@@ -43,5 +42,5 @@ WithTitletip.args = {
     children: 1000,
     maxLength: 3,
     intent: "info",
-    tagProps: {htmlTitle: "1000 messages available"},
-}
+    tagProps: { htmlTitle: "1000 messages available" },
+};

package/src/components/Badge/Badge.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import Tag, { TagProps } from "../Tag/Tag";
-import { IconProps } from "../Icon/Icon";
-import { TestIconProps } from "../Icon/TestIcon";
+
 import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IconProps } from "../Icon/Icon";
+import { TestIconProps } from "../Icon/TestIcon";
+import Tag, { TagProps } from "../Tag/Tag";
 
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
@@ -18,7 +19,7 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
     /**
      * Size of the badge.
      */
-    size?: "small" | "medium" | "large"
+    size?: "small" | "medium" | "large";
     /**
      * Maximum characters used by the badge.
      * Text will be ellipsed, a number is displayed for example a 99+.
@@ -43,25 +44,20 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
  * It can display icons, text and numbers.
  */
 export function Badge({
-  children,
-  className = "",
-  position = "inline",
-  size = "medium",
-  maxLength,
-  intent,
-  tagProps,
-  ...spanProps
+    children,
+    className = "",
+    position = "inline",
+    size = "medium",
+    maxLength,
+    intent,
+    tagProps,
+    ...spanProps
 }: BadgeProps) {
     let badgeContent = children;
     // shorten number values
     // for maxLength=3 display 99+ instead of 1023.
-    if (
-        typeof children === "number" &&
-        maxLength &&
-        maxLength > 1 &&
-        children >= Math.pow(10, maxLength-1)
-    ) {
-        badgeContent = `${Math.pow(10, maxLength-1) - 1}+`
+    if (typeof children === "number" && maxLength && maxLength > 1 && children >= Math.pow(10, maxLength - 1)) {
+        badgeContent = `${Math.pow(10, maxLength - 1) - 1}+`;
     }
     if (typeof children === "object") {
         badgeContent = "";
@@ -70,7 +66,7 @@ export function Badge({
         <span
             className={
                 `${eccgui}-badge ${eccgui}-badge--${position}` +
-                (typeof children === "object" ? ` ${eccgui}-badge--icon` : '')
+                (typeof children === "object" ? ` ${eccgui}-badge--icon` : "")
             }
             {...spanProps}
         >
@@ -81,9 +77,13 @@ export function Badge({
                 large={size === "large"}
                 emphasis={!intent ? "stronger" : undefined}
                 intent={intent}
-                minimal={!!intent ? false : true}
+                minimal={intent ? false : true}
                 icon={typeof children === "object" ? children : undefined}
-                style={(typeof children === "string" && maxLength && maxLength > 1) ? {maxWidth: `calc((${maxLength-1}em + ${maxLength-1}ch)/2)`} : {}}
+                style={
+                    typeof children === "string" && maxLength && maxLength > 1
+                        ? { maxWidth: `calc((${maxLength - 1}em + ${maxLength - 1}ch)/2)` }
+                        : {}
+                }
                 {...tagProps}
             >
                 {badgeContent}

package/src/components/Badge/badge.scss

@@ -7,9 +7,9 @@
     }
 
     .#{$eccgui}-badge--icon & {
-        padding: 0;
-        min-height: 0;
         min-width: 0;
+        min-height: 0;
+        padding: 0;
     }
 }
 
@@ -20,8 +20,8 @@
 
 .#{$eccgui}-badge--bottom-right {
     position: absolute;
-    bottom: 0;
     right: 0;
+    bottom: 0;
 
     .#{$eccgui}-badge__tag {
         right: -50%;
@@ -35,7 +35,7 @@
     right: 0;
 
     .#{$eccgui}-badge__tag {
-        right: -50%;
         top: -0.5 * $eccgui-size-inline-whitespace;
+        right: -50%;
     }
 }

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -1,23 +1,28 @@
-import React, {useCallback} from "react";
+import React, { useCallback } from "react";
 import {
-    Breadcrumbs2 as BlueprintBreadcrumbList,
-    Breadcrumbs2Props as BlueprintBreadcrumbsProps,
-} from "@blueprintjs/popover2";
+    Breadcrumbs as BlueprintBreadcrumbList,
+    BreadcrumbsProps as BlueprintBreadcrumbsProps,
+} from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
+
 import BreadcrumbItem from "./BreadcrumbItem";
 import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
 // FIXME: enforce onItemClick later when href value can always be routed correctly
-export interface BreadcrumbListProps extends Omit<
-    BlueprintBreadcrumbsProps,
-    // we remove some properties that are currently not necessary, required usage should be discussed
-    "breadcrumbRenderer" |
-    "collapseFrom" |
-    "currentBreadcrumbRenderer" |
-    "minVisibleItems" |
-    "overflowListProps" |
-    "popoverProps"
-> {
+export interface BreadcrumbListProps
+    extends TestableComponent,
+        Omit<
+            BlueprintBreadcrumbsProps,
+            // we remove some properties that are currently not necessary, required usage should be discussed
+            | "breadcrumbRenderer"
+            | "collapseFrom"
+            | "currentBreadcrumbRenderer"
+            | "minVisibleItems"
+            | "overflowListProps"
+            | "popoverProps"
+        > {
     /**
         list of breadcrumb items to display
     */
@@ -25,11 +30,17 @@ export interface BreadcrumbListProps extends Omit<
     /**
         click handler used on breadcrumb items
     */
-    onItemClick?(itemUrl: string | undefined, event: object): any;
+    onItemClick?(itemUrl: string | undefined, event: object): boolean | void;
     /**
         native attributes for the unordered HTML list (ul)
+        @deprecated will be removed because the BlueprintJS `Breadcrumbs` component does not support native `ul` attributes. Use `wrapperProps` as alternate way to add native attributes to a container `div` element.
     */
     htmlUlProps?: React.HTMLAttributes<HTMLUListElement>;
+    /**
+     * If set then a `div` element is used as wrapper.
+     * It uses the attributes given via this property.
+     */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
     /**
         char that devides breadcrumb items, default: "/" (currently unsupported)
     */
@@ -56,34 +67,46 @@ export const BreadcrumbList = ({
     htmlUlProps,
     ignoreOverflow = false,
     latenOverflow = false,
+    wrapperProps,
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
     ...otherBlueprintBreadcrumbsProps
 }: BreadcrumbListProps) => {
-    const renderBreadcrumb = useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
-        const {onClick, ...otherProps} = propsBreadcrumb;
-        return (
-            <BreadcrumbItem
-                /*itemDivider="/"*/
-                {...otherProps}
-                onClick={
-                    onItemClick
-                        ? (e) => {
-                              onItemClick(propsBreadcrumb.href, e);
-                          }
-                        : onClick
-                }
-            />
-        );
-    }, [onItemClick]);
+    const renderBreadcrumb = useCallback(
+        (propsBreadcrumb: BreadcrumbItemProps) => {
+            const { onClick, ...otherProps } = propsBreadcrumb;
+            return (
+                <BreadcrumbItem
+                    /*itemDivider="/"*/
+                    {...otherProps}
+                    onClick={
+                        onItemClick
+                            ? (e) => {
+                                  onItemClick(propsBreadcrumb.href, e);
+                              }
+                            : onClick
+                    }
+                />
+            );
+        },
+        [onItemClick]
+    );
 
     const renderCurrentBreadcrumb = React.useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
         return <BreadcrumbItem {...propsBreadcrumb} current={true} /*itemDivider={itemDivider}*/ />;
     }, []);
 
-    const overflowListProps = React.useMemo(() => ignoreOverflow ? {
-        minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
-    } : {}, [ignoreOverflow, otherBlueprintBreadcrumbsProps.items.length])
+    const overflowListProps = React.useMemo(
+        () =>
+            ignoreOverflow
+                ? {
+                      minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
+                  }
+                : {},
+        [ignoreOverflow, otherBlueprintBreadcrumbsProps.items.length]
+    );
 
-    return (
+    const breadcrumbs = (
         <BlueprintBreadcrumbList
             {...otherBlueprintBreadcrumbsProps}
             {...htmlUlProps}
@@ -98,6 +121,18 @@ export const BreadcrumbList = ({
             overflowListProps={overflowListProps}
         />
     );
-}
+
+    return wrapperProps || dataTestId || dataTestid ? (
+        <div
+            className={`${eccgui}-breadcrumb__list__wrapper`}
+            {...(wrapperProps ?? {})}
+            {...{ "data-test-id": dataTestId, "data-testid": dataTestid }}
+        >
+            {breadcrumbs}
+        </div>
+    ) : (
+        <>{breadcrumbs}</>
+    );
+};
 
 export default BreadcrumbList;

package/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx

@@ -1,19 +1,17 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { BreadcrumbItem } from './../../../index';
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { BreadcrumbItem } from "./../../../index";
 
 export default {
     title: "Components/Breadcrumbs/Item",
     component: BreadcrumbItem,
-    argTypes: {
-    },
-}  as ComponentMeta<typeof BreadcrumbItem>
+    argTypes: {},
+} as ComponentMeta<typeof BreadcrumbItem>;
 
-const Template: ComponentStory<typeof BreadcrumbItem> = (args) => (
-    <BreadcrumbItem {...args} />
-);
+const Template: ComponentStory<typeof BreadcrumbItem> = (args) => <BreadcrumbItem {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    text : 'Breadcrumb item',
+    text: "Breadcrumb item",
 };

package/src/components/Button/Button.stories.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Button, Icon, Spacing } from "../../../index";
 import { helpersArgTypes } from "../../../.storybook/helpers";
+import { Button, Icon, Spacing } from "../../../index";
 
 export default {
     title: "Components/Button",
@@ -18,9 +19,13 @@ export default {
             action: "clicked",
         },
     },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
-const TemplateFull: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const TemplateFull: StoryFn<typeof Button> = (args) => (
+    <OverlaysProvider>
+        <Button {...args} />
+    </OverlaysProvider>
+);
 
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
@@ -40,56 +45,56 @@ FullExample.parameters = {
     jest: "Button.test.tsx",
 };
 
-const TemplateIcons: ComponentStory<typeof Button> = (args) => (
-    <>
+const TemplateIcons: StoryFn<typeof Button> = (args) => (
+    <OverlaysProvider>
         <Button {...args} icon={"item-viewdetails"} />
         <Spacing vertical />
         <Button {...args} rightIcon={<Icon name={"item-download"} />} />
-    </>
+    </OverlaysProvider>
 );
 export const ButtonsWithIcon = TemplateIcons.bind({});
 ButtonsWithIcon.args = FullExample.args;
 
-const TemplateSemantic: ComponentStory<typeof Button> = (args) => (
-    <>
+const TemplateSemantic: StoryFn<typeof Button> = (args) => (
+    <OverlaysProvider>
         <Button {...args} text="Normal action" />
         <Spacing vertical />
         <Button {...args} affirmative text="Affirmative action" />
         <Spacing vertical />
         <Button {...args} disruptive text="Disruptive action" />
-    </>
+    </OverlaysProvider>
 );
 export const ButtonSemantics = TemplateSemantic.bind({});
 ButtonSemantics.args = FullExample.args;
 
-const TemplateState: ComponentStory<typeof Button> = (args) => (
-    <>
+const TemplateState: StoryFn<typeof Button> = (args) => (
+    <OverlaysProvider>
         <Button {...args} text="Success" hasStateSuccess />
         <Spacing vertical />
         <Button {...args} text="Warning" hasStateWarning />
         <Spacing vertical />
         <Button {...args} text="Danger" hasStateDanger />
-    </>
+    </OverlaysProvider>
 );
 export const ButtonStates = TemplateState.bind({});
 ButtonStates.args = FullExample.args;
 
-const TemplateContent: ComponentStory<typeof Button> = (args) => (
-    <>
+const TemplateContent: StoryFn<typeof Button> = (args) => (
+    <OverlaysProvider>
         <Button {...args} text="Property label" />
         <Spacing vertical />
         <Button {...args} text={undefined}>
             Children label
         </Button>
-    </>
+    </OverlaysProvider>
 );
 export const ButtonLabels = TemplateContent.bind({});
 ButtonLabels.args = FullExample.args;
 
-const TemplateAnchor: ComponentStory<typeof Button> = (args) => (
-    <>
+const TemplateAnchor: StoryFn<typeof Button> = (args) => (
+    <OverlaysProvider>
         <Button {...args} text="Example link" href="https://eccenca.com/" target="_new" />
-    </>
+    </OverlaysProvider>
 );
 export const LinkButton = TemplateAnchor.bind({});
 LinkButton.args = FullExample.args;

package/src/components/Button/Button.test.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-
 import { render, screen } from "@testing-library/react";
+
 import "@testing-library/jest-dom";
 
-import { FullExample } from "./Button.stories";
+import Icon from "../Icon/Icon";
 
 import Button from "./Button";
-import Icon from "../Icon/Icon";
+import { FullExample } from "./Button.stories";
 
 describe("Button", () => {
     it("should render default button successfully", () => {

package/src/components/Button/Button.tsx

@@ -14,11 +14,12 @@ import Icon from "../Icon/Icon";
 import Badge, { BadgeProps } from "./../Badge/Badge";
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 
+/** @deprecated will be removed, there is no replacement */
 export type AnchorOrButtonProps =
     | Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon">
     | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+interface AdditionalButtonProps {
     /**
      * Always use this when the button triggers an affirmative action, e.g. confirm a process.
      * The button is displayed with primary color scheme.
@@ -71,12 +72,19 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
     /**
      * If an URL is set then the button is included as HTML anchor element instead of a button form element.
      */
-    href?: string;
+    //href?: string;
     icon?: ValidIconName | JSX.Element;
     rightIcon?: ValidIconName | JSX.Element;
-    target?: string;
+    //target?: string;
 }
 
+interface ExtendedButtonProps extends AdditionalButtonProps, Omit<BlueprintButtonProps, "icon" | "rightIcon"> {}
+interface ExtendedAnchorButtonProps
+    extends AdditionalButtonProps,
+        Omit<BlueprintAnchorButtonProps, "icon" | "rightIcon"> {}
+
+export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
+
 /**
  * Display a button element to enable user interaction.
  * It normally should trigger action when clicked.
@@ -98,7 +106,7 @@ export const Button = ({
     badge,
     badgeProps = { size: "small", position: "top-right", maxLength: 2 },
     ...restProps
-}: ButtonProps & AnchorOrButtonProps) => {
+}: ButtonProps) => {
     let intention;
     switch (true) {
         case affirmative || elevated || hasStatePrimary:

package/src/components/Card/Card.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-import {
-    Card as BlueprintCard,
-    CardProps as BlueprintCardProps
-} from "@blueprintjs/core";
+import React from "react";
+import { Card as BlueprintCard, CardProps as BlueprintCardProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface CardProps extends BlueprintCardProps {
@@ -36,39 +34,44 @@ export interface CardProps extends BlueprintCardProps {
  */
 export const Card = ({
     children,
-    className='',
-    elevation=1,
-    isOnlyLayout=false,
-    fullHeight=false,
-    elevated=false,
+    className = "",
+    elevation = 1,
+    isOnlyLayout = false,
+    fullHeight = false,
+    elevated = false,
     scrollinOnFocus,
-    whitespaceAmount="medium",
+    whitespaceAmount = "medium",
     interactive,
     ...otherProps
 }: CardProps) => {
-    const scrollIn = !!scrollinOnFocus ? {
-        tabIndex: 0,
-        onFocus: (e: any) => {
-            const el = e.target.closest(".diapp-iframewindow__content");
-            setTimeout(()=>{if (el) el.scrollIntoView({
-                behavior: "smooth",
-                block: scrollinOnFocus,
-                inline: scrollinOnFocus,
-            })}, 200);
-        }
-    } : {}
+    const scrollIn = scrollinOnFocus
+        ? {
+              tabIndex: 0,
+              onFocus: (e: any) => {
+                  const el = e.target.closest(".diapp-iframewindow__content");
+                  setTimeout(() => {
+                      if (el)
+                          el.scrollIntoView({
+                              behavior: "smooth",
+                              block: scrollinOnFocus,
+                              inline: scrollinOnFocus,
+                          });
+                  }, 200);
+              },
+          }
+        : {};
     const cardElement = (
         <BlueprintCard
             className={
                 `${eccgui}-card` +
-                (fullHeight ? ` ${eccgui}-card--fullheight` : '') +
-                (elevated ? ` ${eccgui}-card--elevated` : '') +
-                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus` : '') +
-                (whitespaceAmount !== "medium" ? ` ${eccgui}-card--whitespace-${whitespaceAmount}` : '') +
-                (!!className ? ` ${className}` : "")
+                (fullHeight ? ` ${eccgui}-card--fullheight` : "") +
+                (elevated ? ` ${eccgui}-card--elevated` : "") +
+                (scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus` : "") +
+                (whitespaceAmount !== "medium" ? ` ${eccgui}-card--whitespace-${whitespaceAmount}` : "") +
+                (className ? ` ${className}` : "")
             }
             elevation={elevation}
-            interactive={!!otherProps.onClick ? true : interactive}
+            interactive={otherProps.onClick ? true : interactive}
             {...scrollIn}
             {...otherProps}
         >

package/src/components/Card/CardActions.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -15,8 +16,8 @@ export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export const CardActions = ({
     children,
-    className='',
-    inverseDirection=false,
+    className = "",
+    inverseDirection = false,
     ...otherProps
 }: CardActionsProps) => {
     return (
@@ -24,8 +25,8 @@ export const CardActions = ({
             {...otherProps}
             className={
                 `${eccgui}-card__actions` +
-                (inverseDirection ? ` ${eccgui}-card__actions--inversedirection` : '') +
-                (className ? ' ' + className : '')
+                (inverseDirection ? ` ${eccgui}-card__actions--inversedirection` : "") +
+                (className ? " " + className : "")
             }
         >
             {children}

package/src/components/Card/CardActionsAux.tsx

@@ -1,25 +1,16 @@
-import React from 'react';
+import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface CardActionsAuxProps extends React.HTMLAttributes<HTMLDivElement> {};
+export type CardActionsAuxProps = React.HTMLAttributes<HTMLDivElement>;
 
 /**
  * Additional side buttons inside `CardActions`.
  * Elements are aligned to the other side of the container.
  */
-export const CardActionsAux = ({
-    children,
-    className='',
-    ...otherProps
-}: CardActionsAuxProps) => {
+export const CardActionsAux = ({ children, className = "", ...otherProps }: CardActionsAuxProps) => {
     return (
-        <div
-            {...otherProps}
-            className={
-                `${eccgui}-card__actions__aux` +
-                (className ? ' ' + className : '')
-            }
-        >
+        <div {...otherProps} className={`${eccgui}-card__actions__aux` + (className ? " " + className : "")}>
             {children}
         </div>
     );