@eccenca/gui-elements 23.0.0-rc.3 → 23.0.0-rc.4

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useCallback} from "react";
 import {
     Breadcrumbs2 as BlueprintBreadcrumbList,
     Breadcrumbs2Props as BlueprintBreadcrumbsProps,
@@ -60,7 +60,7 @@ function BreadcrumbList({
     latenOverflow = false,
     ...otherBlueprintBreadcrumbsProps
 }: BreadcrumbListProps) {
-    const renderBreadcrumb = (propsBreadcrumb: BreadcrumbItemProps) => {
+    const renderBreadcrumb = useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
         const {onClick, ...otherProps} = propsBreadcrumb;
         return (
             <BreadcrumbItem
@@ -75,11 +75,15 @@ function BreadcrumbList({
                 }
             />
         );
-    };
+    }, [onItemClick]);
 
-    const renderCurrentBreadcrumb = (propsBreadcrumb: BreadcrumbItemProps) => {
+    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])
 
     return (
         <BlueprintBreadcrumbList
@@ -93,9 +97,7 @@ function BreadcrumbList({
             minVisibleItems={1}
             breadcrumbRenderer={renderBreadcrumb}
             currentBreadcrumbRenderer={renderCurrentBreadcrumb}
-            overflowListProps={ignoreOverflow ? {
-                minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
-            } : {}}
+            overflowListProps={overflowListProps}
         />
     );
 }

package/src/components/Breadcrumb/breadcrumb.scss

@@ -67,4 +67,8 @@ a.#{$eccgui}-breadcrumb__item {
             text-decoration: none;
         }
     }
+    a {
+        @extend .#{$eccgui}-breadcrumb__item;
+        @extend .#{$ns}-breadcrumb;
+    }
 }

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

@@ -21,6 +21,7 @@ Default.args = {
         {text: "Main click category", onClick: () => alert("Breadcrumb click")},
         {text: <div>Sub category item</div>, href: "#"},
         {text: <span>Disabled breadcrumb with a very long title</span>, disabled: true},
+        {text: <a href="#wrong">Wrongly placed link inside link</a>},
         {text: "Current breadcrumb item", current: true}
     ],
 };

package/src/components/Card/Card.tsx

@@ -49,7 +49,7 @@ function Card({
                 behavior: "smooth",
                 block: scrollinOnFocus,
                 inline: scrollinOnFocus,
-            })}, 100);
+            })}, 200);
         }
     } : {}
     const cardElement = (

package/src/components/Card/CardContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /**
@@ -12,7 +12,7 @@ function CardContent({
     children,
     className='',
     ...otherProps
-}: OverviewItemProps) {
+}: CardContentProps) {
     return (
         <div
             {...otherProps}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -38,6 +38,8 @@ interface ContextMenuProps extends TestableComponent {
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
     contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>
+    /** Disables the button to open the menu. */
+    disabled?: boolean
 }
 
 /**
@@ -49,6 +51,7 @@ function ContextMenu({
     togglerElement = "item-moremenu",
     togglerText = "Show more options",
     contextOverlayProps,
+    disabled,
     togglerLarge = false,
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
@@ -68,6 +71,7 @@ function ContextMenu({
                     name={[togglerElement]}
                     text={togglerText}
                     large={togglerLarge}
+                    disabled={!!disabled}
                     data-test-id={restProps["data-test-id"]}
                 />
             ) : (

package/src/components/Form/FieldItem.tsx

@@ -13,7 +13,7 @@ import {TestableComponent} from "../interfaces";
     * input id could be created when not given
 */
 
-interface IProps extends TestableComponent {
+export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
     hasStatePrimary?: boolean
     hasStateSuccess?: boolean
     hasStateWarning?: boolean
@@ -26,6 +26,9 @@ interface IProps extends TestableComponent {
     messageText?: string
 }
 
+/**
+ * Form element that manages the combination of label, helper texts, input element and feedback messages.
+ */
 function FieldItem({
     hasStatePrimary = false,
     hasStateSuccess = false,
@@ -38,7 +41,7 @@ function FieldItem({
     helperText,
     messageText,
     ...otherProps
-}: IProps) {
+}: FieldItemProps) {
     let classIntent = "";
     switch (true) {
         case hasStatePrimary:
@@ -79,10 +82,10 @@ function FieldItem({
 
     return (
         <div
-            data-test-id={otherProps["data-test-id"]}
             className={
                 `${eccgui}-fielditem` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-fielditem--disabled` : "")
             }
+            {...otherProps}
         >
             {label}
             {userhelp}

package/src/components/Form/FieldItemRow.tsx

@@ -1,12 +1,34 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-/*
-    FIXME: allow grow factors for children
-*/
-/** Allows to layout field items horizontally. */
-function FieldItemRow({ children, className, ...otherProps }: any) {
-    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")} {...otherProps}>{children}</div>;
+export interface FieldItemRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If set to `true` all `FieldItem` childrens have the same width.
+     */
+    justifyItemWidths?: boolean;
+}
+
+/**
+ * Allows to display `FieldItem` children horizontally in one row.
+ */
+function FieldItemRow({
+    children,
+    className,
+    justifyItemWidths = false,
+    ...otherProps
+}: FieldItemRowProps) {
+    return (
+        <div
+            className={
+                `${eccgui}-fielditem__row` +
+                (justifyItemWidths ? ` ${eccgui}-fielditem__row--justified` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherProps}
+        >
+            {children}
+        </div>
+    );
 }
 
 export default FieldItemRow;

package/src/components/Form/form.scss

@@ -157,3 +157,9 @@ form {
         margin-bottom: $eccgui-size-block-whitespace;
     }
 }
+
+.#{$eccgui}-fielditem__row--justified {
+    & > .#{$eccgui}-fielditem {
+        width: 100%;
+    }
+}

package/src/components/Grid/Grid.tsx

@@ -2,14 +2,20 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Grid as CarbonGrid } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {GridDefaultProps} from "carbon-components-react/lib/components/Grid/Grid";
+
+interface GridProps extends GridDefaultProps {
+    verticalStretchable?: boolean
+    useAbsoluteSpace?: boolean
+}
 
 function Grid({
     children,
-    verticalStretchable,
-    useAbsoluteSpace,
+    verticalStretchable = false,
+    useAbsoluteSpace = false,
     className = '',
     ...restProps
-}: any) {
+}: GridProps) {
     return (
         <CarbonGrid
             {...restProps}

package/src/components/Grid/GridColumn.tsx

@@ -2,6 +2,14 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Column as CarbonColumn } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ColumnDefaultProps} from "carbon-components-react/lib/components/Grid/Column";
+
+interface GridColumnProps extends ColumnDefaultProps {
+    small?: boolean
+    medium?: boolean
+    full?: boolean
+    verticalAlign?: "center"
+}
 
 function GridColumn({
     children,
@@ -9,9 +17,9 @@ function GridColumn({
     small = false,
     medium = false,
     full = true,
-    verticalAlign = '',
+    verticalAlign,
     ...otherProps
-}: any) {
+}: GridColumnProps) {
     let sizeConfig = {};
     if (small) sizeConfig = { md:2, lg:3 };
     if (medium) sizeConfig = { md:3, lg:5 };

package/src/components/Grid/GridRow.tsx

@@ -2,6 +2,13 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import { Row as CarbonRow } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {RowDefaultProps} from "carbon-components-react/lib/components/Grid/Row";
+
+interface GridRowProps extends RowDefaultProps {
+    dontWrapColumns?: boolean
+    fullHeight?: boolean
+    verticalStretched?: boolean
+}
 
 function GridRow({
     children,
@@ -10,7 +17,7 @@ function GridRow({
     fullHeight = false,
     verticalStretched,
     ...otherProps
-}: any) {
+}: GridRowProps) {
     return (
         <CarbonRow
             {...otherProps}

package/src/components/HoverToggler/HoverToggler.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { HoverToggler } from "./../../index";
+
+export default {
+    title: "Components/HoverToggler",
+    component: HoverToggler,
+    argTypes: {
+    },
+} as ComponentMeta<typeof HoverToggler>;
+
+const Template: ComponentStory<typeof HoverToggler> = (args) => (
+    <HoverToggler {...args} style={{height: "auto"}} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    baseContent: "Base content.",
+    hoverContent: <>Content<br/>on <a href="#">hover</a>.</>
+};

package/src/components/HoverToggler/HoverToggler.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * The content that is shown when not hovered.
+     */
+    baseContent: JSX.Element;
+    baseContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * The content that is shown when hovered.
+     */
+    hoverContent: JSX.Element;
+    hoverContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * Display as inline element.
+     */
+    inline?: boolean;
+}
+
+/** Displays a specific element. Displays another element when hovered. */
+export const HoverToggler = ({
+    className = "",
+    baseContent,
+    baseContentProps,
+    hoverContent,
+    hoverContentProps,
+    inline = false,
+    style,
+    ...otherProps
+}: HoverTogglerProps) => {
+    return (<div
+        className={
+            `${eccgui}-hovertoggler__wrapper` +
+            (inline ? ` ${eccgui}-hovertoggler--inline` : "")
+        }
+        style={style}
+    >
+        <div
+            className={
+                `${eccgui}-hovertoggler` +
+                (className ? ` ${className}` : "")
+            }
+            {...otherProps}
+        >
+            <div className={`${eccgui}-hovertoggler__basecontent`}>
+                <div className={`${eccgui}-hovertoggler__wrappercontent`} {...baseContentProps}>{ baseContent }</div>
+            </div>
+            <div className={`${eccgui}-hovertoggler__hovercontent`}>
+                <div tabIndex={0} className={`${eccgui}-hovertoggler__wrappercontent`} {...hoverContentProps}>{ hoverContent }</div>
+            </div>
+        </div>
+    </div>);
+}

package/src/components/HoverToggler/hovertoggler.scss

@@ -0,0 +1,45 @@
+.#{$eccgui}-hovertoggler__wrapper {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.#{$eccgui}-hovertoggler--inline {
+    display: inline-flex;
+    width: auto;
+}
+
+.#{$eccgui}-hovertoggler {
+    display: flex;
+    width: 200%;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex-shrink: 0;
+
+    .#{$eccgui}-hovertoggler--inline > & {
+        display: inline-flex;
+    }
+}
+
+.#{$eccgui}-hovertoggler__basecontent,
+.#{$eccgui}-hovertoggler__hovercontent {
+    overflow: hidden;
+    order: 1;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.#{$eccgui}-hovertoggler__hovercontent {
+    order: 2;
+
+    .#{$eccgui}-hovertoggler:hover > &,
+    &:focus-within {
+        order: 0;
+    }
+}

package/src/components/Icon/canonicalIconNames.tsx

@@ -57,8 +57,10 @@ export type ValidIconName =
     | "item-start"
     | "item-stop"
     | "item-reload"
+    | "item-reset"
     | "item-shuffle"
     | "item-draggable"
+    | "item-settings"
     | "operation-search"
     | "operation-clear"
     | "operation-undo"
@@ -84,6 +86,8 @@ export type ValidIconName =
     | "state-checked"
     | "state-checkedsimple"
     | "state-partlychecked"
+    | "state-declined"
+    | "state-confirmed"
     | "artefact-project"
     | "artefact-workflow"
     | "artefact-dataset"
@@ -116,6 +120,9 @@ export type ValidIconName =
     | "operation-auto-graph-layout"
     | "unlinked-item"
     | "write-protected"
+    | "settings"
+    | "favorite-empty"
+    | "favorite-filled"
     | "undefined"
     | "Undefined";
 
@@ -397,6 +404,11 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.Renew20,
         large: icons.Renew32,
     },
+    "item-reset": {
+        small: icons.Reset16,
+        normal: icons.Reset20,
+        large: icons.Reset32,
+    },
     "item-comment": {
         small: icons.AddComment16,
         normal: icons.AddComment20,
@@ -412,6 +424,11 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.Draggable20,
         large: icons.Draggable32,
     },
+    "item-settings": {
+        small: icons.Settings16,
+        normal: icons.Settings20,
+        large: icons.Settings32,
+    },
 
     "operation-search": {
         small: icons.Search16,
@@ -541,6 +558,17 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.CheckboxIndeterminate20,
         large: icons.CheckboxIndeterminate32,
     },
+    "state-declined": {
+        small: icons.ThumbsDown16,
+        normal: icons.ThumbsDown20,
+        large: icons.ThumbsDown32
+    },
+    "state-confirmed": {
+        small: icons.ThumbsUp16,
+        normal: icons.ThumbsUp20,
+        large: icons.ThumbsUp32
+    },
+
 
     "artefact-project": {
         small: icons.Folder16,
@@ -708,6 +736,24 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         large: icons.DocumentProtected32,
     },
 
+    "settings": {
+        small: icons.Settings16,
+        normal: icons.Settings20,
+        large: icons.Settings32
+    },
+
+    "favorite-empty": {
+        small: icons.Star16,
+        normal: icons.Star20,
+        large: icons.Star32
+    },
+
+    "favorite-filled": {
+        small: icons.StarFilled16,
+        normal: icons.StarFilled20,
+        large: icons.StarFilled32
+    },
+
     undefined: {
         small: icons.Undefined16,
         normal: icons.Undefined20,

package/src/components/InteractionGate/InteractionGate.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import { InteractionGate, Spinner, Link, Button, HtmlContentBlock } from "./../../index";
+
+export default {
+  title: "Components/InteractionGate",
+  component: InteractionGate,
+  subcomponents: { Spinner },
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Any sub lements, could contain elements that provide options for user interactions."
+      }
+  },
+} as ComponentMeta<typeof InteractionGate>;
+
+const Template: ComponentStory<typeof InteractionGate> = (args) => (
+  <InteractionGate {...args}></InteractionGate>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+            <p><Link href="https://example.net">Link</Link></p>
+            <p><Button onClick={() => alert("click")}>Button</Button></p>
+        </HtmlContentBlock>
+    )
+}

package/src/components/InteractionGate/InteractionGate.tsx

@@ -0,0 +1,65 @@
+import React, { useRef, useEffect } from "react";
+// FIXME: re-evaluate if polyfill is necessary
+// we currently need a polyfill for inert because Firefox do not support it natively atm
+// @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert#browser_compatibility
+import "wicg-inert";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Spinner, { SpinnerProps } from "./../Spinner/Spinner";
+
+export interface InteractionGateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "inert"> {
+    /**
+     * Prevent interaction with sub elements and narrow them in their visibility.
+     */
+    inert?: boolean;
+    /**
+     * Displays a spinner centered over the sub element.
+     */
+    showSpinner?: boolean;
+    /**
+     * Configure the included `<Spinner />` element.
+     */
+    spinnerProps?: SpinnerProps;
+}
+
+/**
+ * Wrap content that need to be blocked from user interactions
+ * It also has options to display a spinner as overlay.
+ */
+function InteractionGate({
+    children,
+    className,
+    inert = false,
+    showSpinner = false,
+    spinnerProps = {},
+    ...otherProps
+}: InteractionGateProps) {
+    const domRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        // we currently cannot add inert property directly to the div because react types module seem not to know it
+        if (inert) {
+            domRef.current!.setAttribute('inert', '');
+        } else {
+            domRef.current!.removeAttribute('inert');
+        }
+    }, [inert]);
+
+    return (
+        <div className={`${eccgui}-interactiongate__wrapper`}>
+            <div
+                ref={domRef}
+                className={
+                    `${eccgui}-interactiongate` +
+                    (inert ? ` ${eccgui}-interactiongate--inert` : "") +
+                    (className ? ` ${className}` : "")
+                }
+                {...otherProps}
+            >
+                {children}
+            </div>
+            {showSpinner && <Spinner showLocalBackdrop={true} {...spinnerProps} className={`${eccgui}-interactiongate__spinner`} />}
+        </div>
+    );
+}
+
+export default InteractionGate;

package/src/components/InteractionGate/interactiongate.scss

@@ -0,0 +1,11 @@
+.#{eccgui}-interactiongate__wrapper {
+    position: relative;
+}
+
+.#{eccgui}-interactiongate--inert {
+    opacity: $eccgui-opacity-disabled;
+
+    & + .#{$eccgui}-spinner--localbackdrop {
+        background-color: transparent;
+    }
+}

package/src/components/Link/link.scss

@@ -3,4 +3,13 @@
 .#{$prefix}--link {
     font-size: 1em;
     line-height: inherit;
+
+    &:focus {
+        outline: none;
+        outline-offset: 0;
+    }
+    &:focus-visible {
+        outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+        outline-offset: 1px;
+    }
 }

package/src/components/Notification/Notification.tsx

@@ -53,7 +53,7 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
     /**
      * Icon used as depiction that is displayed with the notification.
      */
-    iconName?: ValidIconName;
+    iconName?: ValidIconName | null;
 }
 
 /**